CSS中可以通过修改图片的颜色来达到改变图片颜色的效果,这里介绍一种将图片改为白色的方法。img { filter: grayscale(100%); -webkit-filter: grayscal
CSS中可以通过修改图片的颜色来达到改变图片颜色的效果,这里介绍一种将图片改为白色的方法。
img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
在上述代码中,首先使用了filter属性进行灰度处理,将图片变为黑白色,然后将黑色变为白色,达到将图片变为白色的效果。
如果要修改图片的颜色为其他颜色,只需要将feColorMatrix中的值进行调整即可,如下代码将图片修改为红色:
img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='red'><feColorMatrix type='matrix' values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' /></filter></svg>#red"); -webkit-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='red'><feColorMatrix type='matrix' values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' /></filter></svg>#red"); -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='red'><feColorMatrix type='matrix' values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' /></filter></svg>#red"); }
通过调整feColorMatrix中的值,可以实现各种颜色的转换,如绿色、蓝色等。
粉丝
0
关注
0
收藏
0