如何使用 CSS 向背景图像添加过滤器？

在 CSS 中，可以使用 filter 属性向背景图像添加过滤器。过滤器可以用于改变图像的颜色、亮度、对比度、模糊度等效果，使得图像呈现出不同于原始图像的效果。

语法

selector {
  background-image: url(...);
  filter: filter-function(value);
}

应用

以下是一些常用的过滤器及其效果。

灰度（Grayscale）

将图像变成黑白灰度图像。

selector {
  background-image: url(...);
  filter: grayscale(100%);
}

模糊（Blur）

使图像变得模糊。

selector {
  background-image: url(...);
  filter: blur(5px);
}

色相旋转（Hue-rotate）

改变图像的色相。

selector {
  background-image: url(...);
  filter: hue-rotate(90deg);
}

对比度（Contrast）

增加或减少图像的对比度。

selector {
  background-image: url(...);
  filter: contrast(200%);
}

亮度（Brightness）

使图像变亮或变暗。

selector {
  background-image: url(...);
  filter: brightness(150%);
}

反转颜色（Invert）

将图像颜色反转。

selector {
  background-image: url(...);
  filter: invert(100%);
}

以上是一些常用的过滤器，你也可以使用组合的方式实现更复杂的效果。

selector {
  background-image: url(...);
  filter: grayscale(100%) brightness(150%);
}

注意事项

过滤器是 CSS3 中的新属性，不是所有的浏览器都支持。而且对于在过滤器中使用 background-image 时，可能会导致性能问题，因为浏览器需要对图像进行处理。因此，在使用过滤器时需要谨慎使用，滥用过滤器可能会导致网页加载缓慢。