CSS 滤镜 - 绿叶网

CSS 滤镜（filter）属性提供了一些预设好的图形特效，专门用于处理图片、背景或边框的渲染效果。通过 CSS 滤镜，我们不需要借助 Photoshop 等图片处理软件，就可以轻松地实现各种视觉效果。

CSS 滤镜属性

在 CSS 中，我们可以使用 filter 属性来为元素添加滤镜效果。

语法：

filter: none | filter-function+;

说明：

filter 属性用于指定元素的一个或多个滤镜效果。

none：表示不应用任何滤镜效果。
filter-function：表示应用一个或多个滤镜函数。

filter-function 是 CSS 滤镜的核心，它定义了具体的滤镜效果。CSS 提供了一些内置的滤镜函数，常用的滤镜函数如下表所示。

CSS 滤镜函数
函数	说明
brightness()	亮度
grayscale()	灰度
sepia()	复古
invert()	反色
hue-rotate()	旋转（色相）
drop-shadow()	阴影
opacity()	透明度
blur()	模糊度
contrast()	对比度
saturate()	饱和度

下面，我们详细介绍一下这些滤镜函数。

1. brightness()

brightness() 函数用于调整图像的亮度。它的取值是一个百分比或一个数值。0% 表示完全黑色，100% 表示原始亮度，大于 100% 的值会使图像更亮。

例如，filter: brightness(150%); 表示将图像的亮度提高到 150%。

2. grayscale()

grayscale() 函数用于将图像转换为灰度图像。它的取值是一个百分比或一个数值。0% 表示原始图像，100% 表示完全灰度图像。

例如，filter: grayscale(100%); 表示将图像转换为完全灰度图像。

3. sepia()

sepia() 函数用于将图像转换为棕褐色（复古色）。它的取值是一个百分比或一个数值。0% 表示原始图像，100% 表示完全棕褐色图像。

例如，filter: sepia(100%); 表示将图像转换为完全棕褐色。

4. invert()

invert() 函数用于反转图像的颜色。它的取值是一个百分比或一个数值。0% 表示原始图像，100% 表示完全反转图像的颜色。

例如，filter: invert(100%); 表示完全反转图像的颜色。

5. hue-rotate()

hue-rotate() 函数用于给图像应用色相旋转。它的取值是一个角度值，表示色相旋转的角度。

例如，filter: hue-rotate(180deg); 表示将图像的色相旋转 180 度。

6. drop-shadow()

drop-shadow() 函数用于给图像设置阴影效果。它的取值类似于 box-shadow 属性，包含阴影的偏移距离、模糊半径和颜色。

例如，filter: drop-shadow(5px 5px 5px red); 表示给图像设置一个红色阴影，水平偏移 5 像素，垂直偏移 5 像素，模糊半径为 5 像素。

7. opacity()

opacity() 函数用于调整图像的透明度。它的取值是一个百分比或一个数值。0% 表示完全透明，100% 表示原始图像。

例如，filter: opacity(50%); 表示将图像的透明度设置为 50%。需要注意的是，这里的 opacity 滤镜函数和 CSS 的 opacity 属性的作用是相同的。

8. blur()

blur() 函数用于给图像设置模糊效果。它的取值是一个长度值，表示模糊的半径。

例如，filter: blur(5px); 表示给图像设置 5 像素的模糊效果。

9. contrast()

contrast() 函数用于调整图像的对比度。它的取值是一个百分比或一个数值。0% 表示完全黑色，100% 表示原始对比度，大于 100% 的值会增加图像的对比度。

例如，filter: contrast(200%); 表示将图像的对比度提高到 200%。

10. saturate()

saturate() 函数用于调整图像的饱和度。它的取值是一个百分比或一个数值。0% 表示完全不饱和，100% 表示原始图像，大于 100% 的值会增加图像的饱和度。

例如，filter: saturate(200%); 表示将图像的饱和度提高到 200%。

CSS 滤镜示例

接下来，我们通过几个简单的例子来讲解 CSS 滤镜是如何使用的。

示例 1：CSS 定义模糊滤镜

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            /* 定义模糊滤镜 */
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <img src="./imgs/frog.jpg" alt="">
</body>
</html>

页面效果如下图所示。

CSS 定义模糊滤镜

分析：

filter: blur(5px); 表示定义模糊滤镜，其中模糊半径为 5px。

示例 2：CSS 定义多个滤镜

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            /* 定义灰度滤镜和亮度滤镜 */
            filter: grayscale(100%) brightness(150%);
        }
    </style>
</head>
<body>
    <img src="./imgs/frog.jpg" alt="">
</body>
</html>

页面效果如下图所示。

CSS 定义灰度滤镜和亮度滤镜

分析：

我们可以同时给 filter 属性设置多个滤镜函数，其中 filter: grayscale(100%) brightness(150%); 表示同时使用灰度滤镜和亮度滤镜。

提示: 在某些特定时刻，我们需要将整个网站都设置成灰色调。想要实现这种效果其实非常简单，那就直接给 html 根元素设置灰色滤镜即可。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);     /* Safari 和 Chrome */
}

示例 3：CSS 定义阴影滤镜

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            /* 定义阴影滤镜 */
            filter: drop-shadow(5px 5px 5px red);
        }
    </style>
</head>
<body>
    <img src="./imgs/frog.jpg" alt="">
</body>
</html>

页面效果如下图所示。

CSS 定义阴影滤镜

分析：

drop-shadow() 滤镜函数给图像设置了阴影效果。此时图像会添加一个红色阴影，水平偏移 5px，垂直偏移 5px，模糊半径为 5px。

最后，对于其他滤镜效果，小伙伴们可以自行测试一下。