通过css改变svg img的颜色
程序员文章站
2022-06-30 18:22:58
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景? 但是为了更小的开销,一般css为更好的解决方案,svg的颜色是在标签内通过fill属性写死的,所 ......
需求如下图,hover的时候改变图标颜色,图标为引入的svg img
一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?
但是为了更小的开销,一般css为更好的解决方案,svg的颜色是在标签内通过fill属性写死的,所以用到了使用了css3滤镜filter
中的drop-shadow。
代码如下:
<section> <div classname={styles.image}> <img src={item.icon} alt="advantage" /> </div> <p>{item.line1}</p> <p>{item.line2}</p> </section>
section{ .image{ display: inline-block; overflow: hidden; } img{ position: relative; left: 0; margin-bottom: .1rem; filter: drop-shadow(#ffffff 80px 0); } &:hover{ background-color: gray; img{ left: -80px; } } }
drop-shadow(h-shadow v-shadow blur spread color):给图像设置一个阴影效果。其中<offset-x> <offset-y>分别设置阴影的偏移量,且必填。具体可以查看w3c的标准
主要的实现原理就是设置需要的阴影效果,并隐藏,hover时切换显示就好,简单,但是之前没怎么了解到
上一篇: 饿了么CEO王磊亲自送外卖
下一篇: Python语法教程-基础语法01