[分享]css中将图片改为白色的

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中的值，可以实现各种颜色的转换，如绿色、蓝色等。