CSS filter属性

在本文中，我们将介绍CSS filter，它是一种CSS属性，可以通过在HTML元素上应用各种视觉效果来改变元素的外观。这些效果包括模糊、灰度、对比度、亮度、饱和度、色调、反转等等。

阅读更多：CSS 教程

filter属性

CSS filter属性需要一个滤镜函数列表作为值，这些函数表明要如何处理要过滤的元素。以下是一些常见的滤镜函数：

模糊（blur）

模糊滤镜可以模糊一个元素，使其看起来更加柔和、模糊。以下是一个示例：

.blur {
  filter: blur(5px);
}

灰度（grayscale）

灰度滤镜可以将一个元素变成灰色调，值越大，越接近黑白两色。在以下示例中，元素将变成半灰色。

.grayscale {
  filter: grayscale(50%);
}

对比度（contrast）

对比度滤镜可以增加或降低元素的对比度，从而使其看起来更清晰或更凝聚。在以下示例中，元素的对比度增加了150%。

.contrast {
  filter: contrast(150%);
}

亮度（brightness）

亮度滤镜可以调整元素的亮度级别。在以下示例中，元素的亮度降低了50%。

.brightness {
  filter: brightness(50%);
}

饱和度（saturate）

饱和度滤镜可以增加或减少元素的颜色饱和度。在以下示例中，元素的饱和度降低了50%。

.saturate {
  filter: saturate(50%);
}

色调（hue-rotate）

色调滤镜可以旋转元素的颜色。在以下示例中，元素的颜色被旋转了90度。

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

反转（invert）

反转滤镜可以将元素的颜色进行反转，黑色变成白色，蓝色变成黄色，等等。在以下示例中，元素的颜色被完全反转。

.invert {
  filter: invert(100%);
}

多重滤镜

除了使用单个滤镜，您还可以使用多个滤镜来达到复合效果。

.multiple-filters {
  filter: blur(2px) contrast(160%) brightness(80%);
}

兼容性

CSS filter属性在现代浏览器上良好支持，但在旧版浏览器上可能不会正常工作。可以使用以下方式进行兼容性处理：

.filter {
  filter: blur(2px) contrast(160%) brightness(80%);

  -webkit-filter: blur(2px) contrast(160%) brightness(80%);
  -moz-filter: blur(2px) contrast(160%) brightness(80%);
  -o-filter: blur(2px) contrast(160%) brightness(80%);
  -ms-filter: blur(2px) contrast(160%) brightness(80%);
}