[分享]css3改图片颜色

CSS（层叠样式表）是网页开发中不可或缺的一部分。CSS3是CSS的第三个版本，它的出现使网页开发变得更加方便、易于操作。 CSS3还具备改变图片颜色的功能，通过以下的代码，实现改变图片颜色的效果。以...

CSS（层叠样式表）是网页开发中不可或缺的一部分。CSS3是CSS的第三个版本，它的出现使网页开发变得更加方便、易于操作。

CSS3还具备改变图片颜色的功能，通过以下的代码，实现改变图片颜色的效果。以下代码使用的是pre标签来表示代码，方便阅读。

img {
     /* 使用filter属性来改变图片颜色 */
     filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(200%) brightness(50%) contrast(200%);
} 

使用filter属性，可以改变图片的颜色。有多种滤镜可以使用，可以根据需要来选择不同的效果。

上面的代码中，使用的是六种滤镜，分别是:

• grayscale(100%)：将图片灰度化
• sepia(100%)：将图片变成旧时照片的色调
• hue-rotate(180deg)：旋转图片色相180度
• saturate(200%)：增加图片饱和度
• brightness(50%)：降低图片亮度
• contrast(200%)：增加图片对比度

根据不同的需求，可以自由调整参数来改变图片颜色。

CSS3的出现为网页设计带来了许多便利和趣味，希望大家可以多加尝试和发掘，创造出更加美丽的网页。