css滤镜

使整个网页变灰
在CSS中，filter属性不仅可以用于应用灰度滤镜（如grayscale(1)），还可以应用多种其他滤镜效果。以下是一些常见的filter属性值及其效果：

1. blur()：给元素应用高斯模糊效果。值越大，模糊程度越高。

   • 例如：filter: blur(5px);

2. brightness()：调整元素的亮度。1为原始值，大于1增加亮度，小于1降低亮度。

   • 例如：filter: brightness(0.8);

3. contrast()：调整元素的对比度。1为原始值，大于1增加对比度，小于1降低对比度。

   • 例如：filter: contrast(1.2);

4. drop-shadow()：给元素添加阴影效果。可以设置水平偏移、垂直偏移、模糊半径和颜色。

   • 例如：filter: drop-shadow(2px 2px 4px #666);

5. grayscale()：将元素转为灰度。1为完全灰度，0为无灰度效果。

   • 例如：filter: grayscale(0.5);

6. hue-rotate()：调整元素的色相。单位为角度，0deg为原始值。

   • 例如：filter: hue-rotate(90deg);

7. invert()：反转元素的颜色。1为完全反转，0为无反转效果。

   • 例如：filter: invert(0.7);

8. opacity()：调整元素的透明度。0为完全透明，1为不透明。

   • 例如：filter: opacity(0.8);

9. saturate()：调整元素的饱和度。1为原始值，大于1增加饱和度，小于1降低饱和度。

   • 例如：filter: saturate(1.5);

10. sepia()：将元素转为深褐色。1为完全褐色，0为无褐色效果。

    • 例如：filter: sepia(0.3);

这些滤镜效果可以单独使用，也可以组合在一起，用逗号分隔。例如：

filter: grayscale(1) blur(3px) brightness(0.8);

这将使元素变为灰度，同时应用模糊和降低亮度效果。