CSS3 强大的Filter详解（改变模糊度 亮度 透明度等方法）

CSS3 强大的Filter详解（改变模糊度 亮度 透明度等方法）

引用

CSDN

1.

https://blog.csdn.net/c_qianxia5040/article/details/121953878

CSS3的Filter属性提供了强大的图像处理功能，可以实现模糊、灰度、亮度调整等多种视觉效果。本文将详细介绍CSS3 Filter的各种属性及其使用方法。

1. 模糊（blur）

模糊效果通过blur()函数实现，参数为长度值（length）。

-webkit-filter: blur(9px);
filter: blur(9px);

2. 灰度（grayscale）

灰度效果通过grayscale()函数实现，参数范围为0到1之间的数值。

-webkit-filter: grayscale(1);
filter: grayscale(1);

3. 亮度（brightness）

亮度效果通过brightness()函数实现，参数范围为0到1之间的数值。

-webkit-filter: brightness(2.3);
filter: brightness(2.3);

4. 对比度（contrast）

对比度效果通过contrast()函数实现，参数为数值。

-webkit-filter: contrast(4.4);
filter: contrast(4.4);

5. 饱和度（saturate）

饱和度效果通过saturate()函数实现，参数为数值。

-webkit-filter: saturate(3.6);
filter: saturate(3.6);

6. 色相旋转（hue-rotate）

色相旋转效果通过hue-rotate()函数实现，参数为角度值（angle）。

-webkit-filter: hue-rotate(185deg);
filter: hue-rotate(185deg);

7. 反色（invert）

反色效果通过invert()函数实现，参数范围为0到1之间的数值。

-webkit-filter: invert(1);
filter: invert(1);

8. 阴影（drop-shadow）

阴影效果通过drop-shadow()函数实现，参数包括水平偏移、垂直偏移、模糊半径和颜色。

-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);

9. 透明度（opacity）

透明度效果通过opacity()函数实现，参数范围为0到1之间的数值。

-webkit-filter: opacity(55%);
filter: opacity(55%);

10. 褐色（sepia）

褐色效果通过sepia()函数实现，参数范围为0到1之间的数值。

-webkit-filter: sepia(0.77);
filter: sepia(0.77);

CSS3 Filter属性提供了强大的图像处理功能，可以应用于图像、背景或边框的渲染效果调整。WebKit浏览器率先支持了这些功能，效果非常出色。通过合理运用这些滤镜效果，可以为网页设计增添更多视觉层次和艺术感。