CSS给图片添加滤镜效果

在 CSS 中，你可以使用 filter 属性来给图片添加滤镜效果，包括改变颜色。filter 属性允许你对元素应用各种图像效果，如模糊、亮度、对比度、饱和度、色调旋转等。

要改变图片的颜色，你可以使用 filter 属性的 hue-rotate、saturate、brightness、contrast、sepia、invert 等函数。

以下是一些示例：

1. hue-rotate: 旋转图片色调。

cssimg {
filter: hue-rotate(90deg); /* 旋转 90 度 */
}

1. saturate: 增加或减少图片的饱和度。

cssimg {
filter: saturate(2); /* 增加饱和度 */
}

img {
filter: saturate(0.5); /* 减少饱和度 */
}

1. brightness: 增加或减少图片的亮度。

cssimg {
filter: brightness(0.5); /* 减少亮度 */
}

img {
filter: brightness(2); /* 增加亮度 */
}

1. contrast: 增加或减少图片的对比度。

cssimg {
filter: contrast(0.5); /* 减少对比度 */
}

img {
filter: contrast(2); /* 增加对比度 */
}

1. sepia: 将图片转换为深褐色效果。

cssimg {
filter: sepia(1);
}

1. invert: 反转图片的颜色。

cssimg {
filter: invert(1);
}

你可以将多个滤镜效果组合在一起，只需在 filter 属性中用空格分隔即可。

cssimg {
filter: hue-rotate(90deg) saturate(2) brightness(0.7) contrast(1.2);
}

请注意，滤镜效果可能在不同的浏览器上有所不同，并且在旧版本的浏览器中可能不受支持。为了获得最佳的跨浏览器兼容性，你可能需要使用浏览器前缀（如 -webkit-、-moz-、-o-、-ms-）或使用第三方库，如 Autoprefixer。