请问js如何根据百分比展示部分图片？

小黄人

7713680

发布于
2023-05-30 福建

像这样展示百分比进度的UI图，如何根据后台返回的百分比展示相应部分宽度的图片呢

前端 javascript

阅读 1.5k

1 个回答

得票最新

玛拉_以琳

8.7k41542

发布于
2023-05-30 上海

更新于
2023-05-30

✓ 已被采纳

  <style>
    div{
      width: 400px;
      height: 100px;
      background: url('./Snipaste_2023-05-30_09-54-48.png') no-repeat left center;
      position: relative;
        background-color: #fff
    }

    span {
      position: absolute;
      right: 0;
      top: 0;
      height: 100px;
      width: 20%;
    }
  </style>
</head>

<body>
  <div>
    <span></span>
  </div>
</body>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}
13 回答13k 阅读
如何防止接口的 key 泄露?
目前有一个小程序,功能上比较简单,但是需要调用其他平台提供的 AI 相关接口。为了节省服务器费用,想直接在前端请求接口,但是这样就会暴露接口的 key。有没有其他办法可以防止 key 泄露? 或者默许 key 可能的泄露,然后实时监控接口的使用量,这种方式是否可行?
8 回答2.8k 阅读
字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？
尝试一下字节的 trae AI IDE ([链接])安装后导入 vscode 的配置，好像一起把 vscode 的插件也导入了也能看到 vscode 之前配置的 ssh remote 但是连不上看到「输出」如下⬇️ {代码...}
2 回答5.2k 阅读✓ 已解决
Next.js做纯前端是否可行？
最近在学习Next.js存在一个疑问，如果只需要做前端界面的渲染和交互后端逻辑都用java来做，是否还需要使用Next.js，还是说直接使用React+Tailwind css更好
7 回答2.2k 阅读
在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？
请问：在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？
5 回答1.4k 阅读
请问开发React Native，一般是推荐哪个主流的UI库呢？
请问开发React Native，一般是推荐哪个主流的UI库呢？我们知道React有antd，但是React Native的话好像React Native Mobile RN不是最主流的。
3 回答2.3k 阅读✓ 已解决
如何实现一个深拷贝函数？
在项目开发中，如何实现一个深拷贝函数？
3 回答1.3k 阅读✓ 已解决

相似问题

web 端如何监听下载进度百分比?
1 回答1.7k 阅读
vue中加载图片，不同的百分比值展示不同状态的图片
2 回答2.3k 阅读
关于echarts的柱状图如何以百分比显示的问题
1 回答5.3k 阅读
css的height百分比是相对于什么测量的
4 回答5.2k 阅读
js分钟根据时间间隔分割？
4 回答2.2k 阅读✓ 已解决

找不到问题？创建新问题

请问js如何根据百分比展示部分图片？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

Next.js做纯前端是否可行？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

请问开发React Native，一般是推荐哪个主流的UI库呢？

如何实现一个深拷贝函数？