使用 CSS 滤镜效果的优点

CSS 中的滤镜效果模块提供了属性和函数，让你无需使用 Photoshop 或发送额外的 HTTP 请求即可应用上述视觉效果。唯一需要的软件是用户的浏览器。此外，与预设的图像效果不同，CSS 滤镜效果是响应式且可动画的。

CSS 滤镜效果模块提供了filter和backdrop-filter属性，你可以使用它们来影响文本、图像、背景和边框，或你应用这些属性的任何元素的渲染。该模块还定义了数据类型，允许你添加图形效果，例如模糊或颜色偏移。使用滤镜函数，你不仅可以改变元素的外观，还可以通过你创建的滤镜引用 SVG 滤镜。

滤镜效果属性

CSS 滤镜效果模块的以下两个滤镜属性使你能够对元素应用零个、一个或多个图形效果

使用filter属性，你可以在元素渲染之前对其应用模糊、投影和褐色等滤镜效果。滤镜效果直接应用于元素，包括元素的内容、边框和内边距。

使用backdrop-filter属性，你可以对元素后面的区域（元素的“背景”）应用图形效果。backdrop-filter属性通常用于使前景内容更清晰易读，尤其是在放置内容的较大区域没有为内容提供足够的对比度时。滤镜效果仅应用于元素的背景，而不应用于元素的内容。

filter和backdrop-filter属性接受一个以空格分隔的滤镜列表，这些滤镜按声明的顺序应用。

滤镜函数

CSS 滤镜效果模块提供了 10 个函数，以及通过url()引用应用 SVG 滤镜来定义几乎无限的效果的能力。

下表列出了 10 个滤镜函数，以及它们的值类型、适用的最小值、产生效果的最大值以及用于插值的初始值。

滤镜函数

参数类型

最小值

最大效果

插值

默认值（无效果）

blur()

0

0

blur(0)

brightness()

或

0

1

brightness(1) 或 brightness(100%)

contrast()

0

1

contrast(1) 或 contrast(100%)

drop-shadow()

0 0 0 currentColor

drop-shadow(0 0 0 currentColor)

grayscale()

或

0

100%

0

grayscale(0) 或 grayscale(0%)

hue-rotate()

0

hue-rotate(0deg)

invert()

或

0

100%

0

invert(0) 或 invert(0%)

opacity()

或

0

100%

1

opacity(1) 或 opacity(100%)

saturate()

或

0

100%

1

saturate(100%)

sepia()

或

0

100%

0

sepia(0%)

对于有最小值的滤镜函数，包含小于最小值的任何值都会使整个属性声明无效，而不仅仅是逗号分隔列表中的问题滤镜函数。

最大效果值可以被超出。包含大于列出的最大值是有效的，但它不会增加效果超过列出的最大值。换句话说，元素上的效果将与设置最大效果值时相同。例如，在褐色示例中设置sepia(400%)会产生与sepia(100%)（最大值）相同的效果。

默认值是不产生效果的值。虽然这些值不产生效果，但它们提供了初始插值，并提供了一个如何设置值的示例。这些默认值提供了允许的最小值和最大效果值之间的衡量标准。

应用滤镜效果

filter和backdrop-filter属性接受一个滤镜函数列表，其中可能包含一个或多个、默认关键字none或作为url()值的SVG 滤镜。

应用褐色滤镜效果

如果你将鼠标悬停在下面的褐色图像上，你会瞬间看到全彩图像。

通过将filter属性的值指定为sepia()滤镜函数，图像被设置为褐色。通过设置filter: none，在:hover和:focus时移除滤镜。

html

cssimg {

filter: sepia(100%);

}

img:hover,

img:focus {

filter: none;

}

在元素中，tabindex设置为0，以便在不改变键盘用户tab键顺序的情况下启用焦点，因为不是交互元素。

img {

max-width: 100%;

height: 100%;

}

将滤镜效果应用于其他元素

虽然通常应用于图像，但filter和backdrop-filter属性可以应用于任何元素或伪元素。

在此示例中，使用drop-shadow()滤镜添加了发光效果，具有3px模糊和0偏移。

cssh1 {

color: midnightblue;

filter: drop-shadow(0 0 3px magenta);

}

h1 {

font-family: sans-serif;

font-size: 2rem;

}

Glow created with CSS filter

应用多个滤镜

虽然褐色filter示例只包含一个滤镜函数，但你可以设置多个滤镜。filter和backdrop-filter属性接受一个以空格分隔的滤镜列表，这些滤镜按声明的顺序应用。

此示例通过backdrop-filter属性应用了两个滤镜——hue-rotate()和blur()。背景，即

元素后面的区域，应用了颜色偏移和模糊。

css.container {

background: url("/shared-assets/images/examples/listen_to_black_women.jpg")

no-repeat left / contain goldenrod;

}

p {

backdrop-filter: hue-rotate(240deg) blur(5px);

background-color: rgb(255 255 255 / 10%);

text-shadow: 2px 2px black;

}

.container {

padding: 3rem;

width: 30rem;

}

p {

padding: 0.5rem;

color: white;

font-size: 2rem;

font-family: sans-serif;

}

应用重复的滤镜

由于滤镜按顺序应用，你可以多次使用滤镜函数。在此示例中，drop-shadow()滤镜已使用了四次，每次都具有不同的值。

html

img {

width: 49%;

}

cssimg {

filter: drop-shadow(2px 2px 0 magenta) drop-shadow(-2px -2px 0 royalblue)

drop-shadow(2px 2px 0 lime) drop-shadow(-2px -2px 0 darkorange);

}

img + img {

filter: none;

}

在第一个曼荼罗示例中，四道投影应用于一个线描 SVG。为了进行比较，还包含了一个移除了滤镜（使用filter: none）的相同 SVG。

指定滤镜函数顺序

创建滤镜效果时，filter或backdrop-filter属性会提供一个以空格分隔的滤镜列表。这些滤镜效果按照它们出现的顺序应用。

在此示例中，品红色投影和 180 度色相旋转都应用于一级标题。该示例展示了这些滤镜以不同顺序应用时的效果。

cssh1 {

color: midnightblue;

}

#hueFirst {

filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);

}

#shadowFirst {

filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);

}

h1 {

font-family: sans-serif;

font-size: 2rem;

}

Hue change happens before drop shadow.

Drop shadow applied before hue change.

No filter effects applied.

相同的滤镜应用于两行文本，但顺序不同。在第一行中，在应用阴影之前改变了文本的色相，因此阴影是magenta。在第二行中，将投影添加到深蓝色文本，然后改变文本和阴影的色相。

第三行未应用任何滤镜效果，以显示原始效果作为比较。因此，第三行保持为midnightblue或#191970。hue-rotate(180deg)滤镜将前两行文本更改为#252500。

注意：十六进制 rgb 颜色#191970等于hsl(240deg 63.5% 26.9%)，而#252500是hsl(60deg 100% 7.3%)。 颜色旋转发生在 sRGB 颜色空间，这就是色相按预期改变而饱和度和亮度值未保持不变的原因。

使用 SVG 滤镜

除了 10 个已定义的外，CSS 滤镜效果还支持url()，其参数为SVG 滤镜，可以嵌入内部或外部 SVG 文件中。

单个 SVG 可用于定义多个滤镜，每个滤镜都有一个id

html

在url()中引用滤镜的id，用于内联和外部 SVG

cssfilter: url("#blur3");

filter: url("https://example.com/svg/filters.svg#blur3");

模糊图像

就像blur()滤镜函数对其应用的元素应用高斯模糊一样，SVG 滤镜元素也可以用于模糊内容。

在这两种情况下，模糊半径值，在 CSS 中指定为，在 SVG 中指定为等效像素，定义了高斯函数的标准差值。换句话说，它定义了屏幕上相互融合的像素数量；值越大，模糊程度越高。

的stdDeviation属性接受最多两个值，从而能够创建更复杂的模糊值。为了创建等效模糊，我们为stdDeviation包含一个值

html

xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"

filter="url(#blur)" />

SVG url()滤镜值可以作为 SVG 元素的filter属性的值，也可以作为 CSS filter和backdrop-filter属性值的一部分。

css.filter {

filter: blur(3.5px);

}

.svgFilter {

filter: url("#blur");

}

另见

mask

background-blend-mode, mix-blend-mode

CSS 滤镜效果

SVG 元素，SVG中的 SVG filter属性

将 SVG 效果应用于 HTML 内容

帮助改进 MDN

此页面对您有帮助吗？

是

否

了解如何贡献 此页面最后修改于 2025 年 8 月 9 日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题