CSS 过滤器

CSS 过滤器是一种在 CSS 中使用图形处理效果的技术。通过使用 CSS 过滤器，可以对网页上的图像进行处理，比如修改颜色、应用模糊效果等。

使用方法

使用 CSS 过滤器需要在 CSS 中使用 filter 属性。

img {
  filter: blur(5px);
}

在上面的示例中，filter 属性被用于对 img 标签应用模糊效果。这里的 blur() 函数表示模糊程度，单位为像素。

支持的效果

CSS 过滤器支持多种效果，常用的包括：

• 模糊（blur）
• 亮度（brightness）
• 对比度（contrast）
• 深度（drop-shadow）
• 灰度（grayscale）
• 色相旋转（hue-rotate）
• 不透明度（opacity）
• 饱和度（saturate）
• 反色（invert）
• 透明度（sepia）

示例

下面是一个展示 blur() 和 grayscale() 函数的示例。

<img src="https://picsum.photos/400/300" alt="图片" class="blur grayscale">

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

.grayscale {
  filter: grayscale(1);
}

在这个示例中，class 属性分别被设置为 blur 和 grayscale，对应于 CSS 样式中的处理效果。最终结果是一个模糊并变为黑白的图片。

浏览器兼容性

CSS 过滤器在现代浏览器中得到了很好的支持，但在一些较老的浏览器中可能无法正常工作。如果你需要在较老的浏览器中使用 CSS 过滤器，可以使用 Polyfill 等工具来解决兼容性问题。

结语

以上是 CSS 过滤器的简单介绍。要了解更多关于 CSS 过滤器的信息，可以参考 MDN 提供的文档。