filter

CSS 的 filter 属性用于对元素应用图形效果，如模糊、亮度、对比度等。通过这个属性，可以创造出多种视觉效果，而无需使用图像编辑软件。以下是一些常用的 filter 值：

1. blur()：模糊效果。

   filter: blur(5px);

2. brightness()：调整亮度。

   filter: brightness(150%);

3. contrast()：调整对比度。

   filter: contrast(200%);

4. grayscale()：将图像转换为灰度。如在特殊日子，将网站转换为黑白。

   filter: grayscale(100%);

5. invert()：反转颜色。

   filter: invert(100%);

6. opacity()：调整透明度。

   filter: opacity(50%);

7. saturate()：调整饱和度。

   filter: saturate(300%);

8. sepia()：将图像变成复古风格。

   filter: sepia(100%);

9. drop-shadow()：添加阴影效果。

   filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));

使用示例

你可以将多个过滤器组合使用，效果会叠加。

.element {
    filter: blur(5px) brightness(150%) contrast(120%);
}

注意事项

• filter 属性可以应用于许多 HTML 元素，包括图像、文本和容器等。
• 在一些旧版本的浏览器中可能不完全支持，因此需要检查兼容性。
• 过滤效果会影响性能，尤其是在动画或大图像上使用时要谨慎。

通过巧妙使用 filter，可以为网页增加视觉吸引力和丰富的交互体验！

参考

• MDN Web Docs
• CSS Filters