200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > css改变图片颜色6 通过css改变svg img的颜色

css改变图片颜色6 通过css改变svg img的颜色

时间:2018-12-09 18:13:33

相关推荐

css改变图片颜色6 通过css改变svg img的颜色

需求如下图,hover的时候改变图标颜色,图标为引入的svg img

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?

但是为了更小的开销,一般css为更好的解决方案,svg的颜色是在标签内通过fill属性写死的,所以用到了使用了css3滤镜filter中的drop-shadow。

代码如下:

{item.line1}

{item.line2}

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):给图像设置一个阴影效果。其中分别设置阴影的偏移量,且必填。具体可以查看w3c的标准

主要的实现原理就是设置需要的阴影效果,并隐藏,hover时切换显示就好,简单,但是之前没怎么了解到

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。