[分享]css中如何将图片变色

如何使用CSS将图片变色 CSS是前端开发中常用的一种样式语言，在CSS中可以实现很多效果，例如改变字体、颜色、大小等等。其中，如果想将图片变色，则需要使用CSS中的滤镜属性。 下面以一张图片为例，演...

如何使用CSS将图片变色
CSS是前端开发中常用的一种样式语言，在CSS中可以实现很多效果，例如改变字体、颜色、大小等等。其中，如果想将图片变色，则需要使用CSS中的滤镜属性。
下面以一张图片为例，演示如何使用CSS将图片变色。
首先，在HTML中引入图片：

<img src="image.jpg" alt="图片"> 

接下来，在CSS中设置滤镜属性：

p img {
    filter: grayscale(100%);
} 

以上代码中，p img表示选择p标签下的img标签，而filter属性则可以改变图片的颜色。其中，grayscale(100%)表示将图片变为灰色。 那么，除了灰色之外，CSS还支持哪些滤镜呢？
以下是一些常见的滤镜效果及其代码：
1. 饱和度 - saturate()

p img {
    filter: saturate(200%);
} 

2. 亮度 - brightness()

p img {
    filter: brightness(50%);
} 

3. 对比度 - contrast()

p img {
    filter: contrast(200%);
} 

4. 反转颜色 - invert()

p img {
    filter: invert(100%);
} 

在使用滤镜属性的同时，也可以使用CSS中的其他属性，例如opacity（透明度）和border（边框）等等，以达到更加丰富的效果。
总之，在CSS中使用滤镜属性可以很容易地实现图片的颜色变化，通过不同的滤镜效果可以呈现出各种各样的效果。