使用滤镜效果

您是否曾经将鼠标悬停在黑白或棕褐色图像上，并立即显示出全彩图像？您是否曾经遇到过背景图像中有一个小的模糊区域，使顶部的文本更易于阅读？过去，这些操作需要图像编辑软件、时间和额外的 HTTP 请求。

使用 CSS 滤镜效果的优势

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

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

滤镜效果属性

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

使用filter 属性，您可以在元素渲染之前将模糊、阴影和棕褐色等滤镜效果应用于该元素。滤镜效果直接应用于元素，包括元素的内容、边框和填充。
使用backdrop-filter 属性，您可以将图形效果应用于元素后面的区域（元素的“背景”）。backdrop-filter 属性通常用于使前景内容更易于阅读，尤其是在放置内容的较大区域无法为内容提供足够的对比度时。滤镜效果仅应用于元素的背景，而不应用于元素的内容。

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

滤镜函数

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

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

滤镜函数	参数类型	最小值	最大效果	插值值	默认值（无效果）
`blur()`	`<length>`	`0`		`0`	`blur(0)`
`brightness()`	`<number>` 或 `<percentage>`	`0`		`1`	`brightness(1)` 或 `brightness(100%)`
`contrast()`	`<length>`	`0`		`1`	`contrast(1)` 或 `contrast(100%)`
`drop-shadow()`	`<shadow>`			`0 0 0 currentcolor`	`drop-shadow(0 0 0 currentcolor)`
`grayscale()`	`<number>` 或 `<percentage>`	`0`	`100%`	`0`	`grayscale(0)` 或 `grayscale(0%)`
`hue-rotate()`	`<angle>`			`0`	`hue-rotate(0deg)`
`invert()`	`<number>` 或 `<percentage>`	`0`	`100%`	`0`	`invert(0)` 或 `invert(0%)`
`opacity()`	`<number>` 或 `<percentage>`	`0`	`100%`	`1`	`opacity(1)` 或 `opacity(100%)`
`saturate()`	`<number>` 或 `<percentage>`	`0`	`100%`	`1`	`saturate(100%)`
`sepia()`	`<number>` 或 `<percentage>`	`0`	`100%`	`0`	`sepia(0%)`

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

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

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

应用滤镜效果

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

应用褐色滤镜效果

如果将鼠标悬停在下面的褐色图像上，您将立即看到全彩图像。

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

html

<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />

css

img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}

在<img> 元素中，tabindex 设置为0 以启用焦点而不更改键盘用户的选项卡顺序，因为<img> 不是交互式元素。

img {
  max-width: 100%;
  height: 100%;
}

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

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

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

css

h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1>Glow created with CSS filter</h1>

应用多个滤镜

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

此示例通过backdrop-filter属性应用了两个滤镜——hue-rotate() 和 blur()。背景（<p> 元素后面的区域）应用了颜色偏移和模糊。

css

.container {
  background: url(image.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: #ffffff;
  font-size: 2rem;
  font-family: sans-serif;
}

<div
  class="container"
  style="background-image: url('https://mdn.github.io/shared-assets/images/examples/listen_to_black_women.jpg');">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

应用重复滤镜

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

html

<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />

img {
  width: 49%;
}

css

img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
img + img {
  filter: none;
}

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

指定滤镜函数顺序

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

在此示例中，magenta投影和180deg色调旋转都应用于一级标题。该示例显示了以不同顺序应用这些滤镜的效果。

css

h1 {
  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;
}

<h1 id="hueFirst">Hue change happens before drop shadow.</h1>
<h1 id="shadowFirst">Drop shadow applied before hue change.</h1>
<h1>No filter effects applied.</h1>

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

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

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

使用 SVG 滤镜

除了 10 个定义的<filter-function>之外，CSS 滤镜效果还支持url()，其中参数是SVG 滤镜，该滤镜可以嵌入到内部或外部 SVG 文件中。

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

html

<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

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

css

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

模糊图像

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

在这两种情况下，模糊半径值（在 CSS 中指定为<length>，在 SVG 中指定为像素等效的<number>）定义了高斯函数的标准偏差值。换句话说，它定义了屏幕上彼此混合的像素数；较大的值会产生更多的模糊。

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

<table cellpadding="5">
  <thead>
    <tr>
      <th>CSS example</th>
      <th>SVG example</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag"
          class="svgFilter" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

html

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

SVG url()滤镜值可以包含在 SVG <image> 元素的filter属性的值中，或作为 CSS filter 和 backdrop-filter 属性的值的一部分。

css

.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url(#blur);
}

另请参阅

mask
background-blend-mode，mix-blend-mode
CSS 滤镜效果
SVG <filter> 元素，SVG filter 属性在 SVG 中
将 SVG 效果应用于 HTML 内容