css3 滤镜改变图片颜色

CSS3滤镜可以在不使用JavaScript，而仅仅使用CSS的情况下，改变图片的颜色和其他属性。有许多种CSS3滤镜可供选择，其中包括sepia(棕褐色)，grayscale(灰度)，hue-rotate(色相旋转)和saturate(饱和度增强)。

.img-sepia {
    filter: sepia(100%);
}
.img-grayscale {
    filter: grayscale(100%);
}
.img-hue-rotate {
    filter: hue-rotate(90deg);
}
.img-saturate {
    filter: saturate(200%);
}
    

上面的代码集中展示了四种CSS3滤镜。其中，第一个示例将图像转换为棕褐色(sepia)，第二个示例将图像转换为灰度(grayscale)，第三个示例将图像的色相旋转90度(hue-rotate)，第四个示例将图像的饱和度增强200%。

不同的滤镜可以通过使用不同的CSS属性，来改变图片的其他属性，包括亮度(brightness)，模糊度(blur)，对比度(contrast)和透明度(opacity)。使用CSS3滤镜，你可以为你的网站的图片添加更多的功能，使它们看起来更加生动活泼。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！