背景过滤所有属性 - CSS

在 CSS 中，我们可以通过背景过滤属性（Background Filter Property）来改变背景图像的颜色、模糊程度等属性。

语法

backdrop-filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

参数说明

• none：默认值，不应用任何过滤效果。
• blur()：模糊效果，可传入值为模糊程度，如 blur(10px)。
• brightness()：亮度效果，可传入值为亮度百分比，如 brightness(50%)。
• contrast()：对比度效果，可传入值为对比度百分比，如 contrast(200%)。
• drop-shadow()：阴影效果，可传入值为阴影偏移和模糊程度，如 drop-shadow(10px 10px 5px #888888)。
• grayscale()：灰度效果，可传入值为灰度百分比，如 grayscale(50%)。
• hue-rotate()：色相旋转效果，可传入值为旋转角度，如 hue-rotate(90deg)。
• invert()：反相效果，可传入值为反相百分比，如 invert(50%)。
• opacity()：透明度效果，可传入值为透明度百分比，如 opacity(50%)。
• saturate()：饱和度效果，可传入值为饱和度百分比，如 saturate(200%)。
• sepia()：棕褐色效果，可传入值为棕褐色百分比，如 sepia(50%)。
• url()：使用图像作为过滤器，可传入图像 URL，如 url(filter.png)。

示例

.text {
  background-color: #444444;
  color: #ffffff;
  
  backdrop-filter: blur(5px);
}

该例子中，.text 类的背景颜色为 #444444，文字颜色为白色。应用了 backdrop-filter 属性，使得背景图像模糊程度为 5px。

浏览器支持

目前，backdrop-filter 属性尚未被所有浏览器支持。请查看浏览器支持情况：https://caniuse.com/backdrop-filter

注意事项

1. backdrop-filter 属性在使用时需要配合 background-color 属性一起使用，才能产生效果。
2. 由于 backdrop-filter 属性会增加浏览器渲染负荷，过多的使用可能会影响网页性能。建议仅在必要时使用，或仅对少量元素使用。