[分享]css中如何让一张图片变色

想要让一张图片在网页中变色，那么我们可以使用CSS的filter属性。img { filter: grayscale(100); } 在上面的代码中，我们选择了一个图片元素，然后应用了一个名为gray...

想要让一张图片在网页中变色，那么我们可以使用CSS的filter属性。

img {
  filter: grayscale(100%);
} 

在上面的代码中，我们选择了一个图片元素，然后应用了一个名为grayscale的CSS滤镜函数。在这里，我们将滤镜的强度设定为100%，这就相当于完全把该图片转化为灰色。

不过，我们也可以使用一个名为hue-rotate的CSS滤镜函数，来让图片变成不同的颜色：

img {
  filter: hue-rotate(90deg);
} 

在上面的代码中，我们将滤镜的强度设定为90度。这将按照CSS圆形颜色的顺序，将图片从我们原来设定的颜色旋转90度。

最后，我们也可以通过叠加多个滤镜，来达到更加酷炫的效果：

img {
  filter: grayscale(100%) blur(3px) contrast(200%);
} 

在这里，我们将图片变成了完全的灰色，并且增加了3像素的模糊，在提高了对比度为200%的情况下，让图片呈现出更加鲜明生动的效果。

总的来说，使用filter属性可以让我们从多个角度来控制图片的外观。这个属性非常灵活，对于那些热衷于摆弄图片的个人与企业来说，非常有用。