自定义背景的进度条 我就是我 2023-06-07 10:46 42阅读 0赞 ## 在一个需要用到进度条的场景下，且背景是图片，可以利用裁剪功能来进行完成 ## ![在这里插入图片描述][2019101415183350.png] 下面提供思路 **关键点在于rect（0px, params + ‘px’, 0px, 0px）** 中的params位置不能写死，需要配合JS，或者Vue中的模板表达式来进行设置，提供后一种实现代码 <img src="./" :style="{ clip: rect(0px, ((currentNumber/totalNumber) * 100 + '%') * imgLength + 'px' , 0px, 0px)}" > img { position:absolute; /* clip: rect(0px, params, 0px, 0px); */ } [2019101415183350.png]: /images/20230601/edabb920595249e188639af98915fd87.png
还没有评论，来说两句吧...