对图像应用颜色 - CSS

在网站设计中，我们通常会需要对图像应用颜色。这可以通过 CSS 的 filter 属性来实现。

filter 属性

filter 属性可以用来设置元素的视觉效果，比如模糊、饱和度、对比度等。其中，可以使用的值包括：

• blur: 模糊
• brightness: 亮度
• contrast: 对比度
• grayscale: 灰度
• hue-rotate: 色相旋转
• invert: 反色
• opacity: 透明度
• saturate: 饱和度
• sepia: 乌贼墨色

应用颜色

下面是一个例子，展示如何使用 filter 属性来应用颜色：

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

上面的代码会将每张图片的色相旋转90度，从而向色轮的下一行移动。当然，你可以尝试使用其他值，比如 180deg、270deg 等。

若想让图像变为黑白色，可以使用以下代码：

img {
  filter: grayscale(100%);
}

上面的代码将设置图像的灰度为 100%，达到黑白的效果。

总结

在 CSS 中，可以使用 filter 属性来对元素应用颜色。值得注意的是，不同的值会产生不同的视觉效果，可以根据需要来选择。同时，CSS 还支持更多的操作，可以进一步探索。