CSS3 img filter(滤镜)属性--使图片置灰
2021-02-04 本文已影响0人
前端小猪仔
最新在项目中新运用到CSS3 filter(滤镜) 属性
首先需求是矿机有在线和离线状态，在线矿机算力曲线图片正常显示，离线矿机的 算力曲线图片应该置灰。
由于算力曲线图片是后端直接生成24个点我们拿到字段进行拼接得出url地址，因此我们需要去修改图片的颜色。
查阅资料发现了img的filter属性可以修改图片颜色为黑白 同时还可以做出高斯模糊的效果
在线图片效果
我们给img加上以下属性
style="filter: grayscale(100%) opacity(40%);"
离线效果
大功告成，具体属性可以看菜鸟教程，附上链接https://www.runoob.com/cssref/css3-pr-filter.html
