1. Web
  2. CSS
  3. filter

filter

Baseline 广泛可用 *

此特性已非常成熟，可在多种设备和浏览器版本上使用。自 ⁨2016 年 9 月⁩以来，它已在各大浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

filter CSS 属性可为元素应用模糊或颜色偏移等图形效果。滤镜通常用于调整图像、背景和边框的渲染效果。

有几个可用的函数，例如 blur() 和 contrast()，可以帮助你实现预定义的效果。

试一试

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

<section id="default-example">
  <div class="example-container">
    <img
      id="example-element"
      src="/shared-assets/images/examples/firefox-logo.svg"
      width="200" />
  </div>
</section>

.example-container {
  background-color: white;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

语法

css
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiple filters */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

引用 SVG 滤镜

你可以使用 url() 来引用 SVG 滤镜元素。要引用 SVG <filter> 元素，请使用以下语法：

css
filter: url("file.svg#filter-element-id");

函数

filter 属性可以指定为 none 或下面列出的一个或多个函数。如果任何函数的参数无效，该函数将返回 none。除非另有说明，接受百分比值（如 34%）的函数也接受小数表示的值（如 0.34）。

当 filter 属性值包含多个函数时，滤镜将按顺序应用。

blur()

对输入图像应用高斯模糊。

css
filter: blur(5px);
brightness()

对输入图像应用线性乘数，使其看起来更亮或更暗。值是效果的线性乘数，0% 会创建完全黑色的图像，100% 没有效果，超过 100% 的值会使图像变亮。

css
filter: brightness(2);
contrast()

调整输入图像的对比度。值为 0% 会使图像变为灰色，100% 没有效果，超过 100% 的值会增加对比度。

css
filter: contrast(200%);
drop-shadow()

将参数 <shadow> 作为投影应用，投影会跟随图像的轮廓。投影的语法类似于 <box-shadow>（在 CSS 背景和边框模块中定义），但 inset 关键字和 spread 参数是不允许的。与所有 filter 属性值一样，drop-shadow() 之后的任何滤镜都会应用于该投影。

css
filter: drop-shadow(16px 16px 10px black);
grayscale()

将图像转换为灰度图。值为 100% 是完全灰度。初始值 0% 使输入保持不变。0% 和 100% 之间的值会对效果产生线性乘数影响。

css
filter: grayscale(100%);
hue-rotate()

应用色相旋转。<angle> 值定义了输入样本将在色相环上调整的度数。值为 0deg 使输入保持不变。

css
filter: hue-rotate(90deg);
invert()

反转输入图像中的样本。值为 100% 会完全反转图像。值为 0% 使输入保持不变。0% 和 100% 之间的值会对效果产生线性乘数影响。

css
filter: invert(100%);
opacity()

应用透明度。0% 使图像完全透明，100% 使图像保持不变。

css
filter: opacity(50%);
saturate()

使图像饱和，0% 为完全不饱和，100% 使图像保持不变，超过 100% 的值会增加饱和度。

css
filter: saturate(200%);
sepia()

将图像转换为深褐色，值为 100% 使图像完全变为深褐色，0% 不做任何改变。

css
filter: sepia(100%);

组合函数

你可以组合任意数量的函数来操控渲染。滤镜会按照声明的顺序应用。以下示例增强了图像的对比度和亮度：

css
filter: contrast(175%) brightness(103%);

插值

在动画中，如果开始和结束的滤镜都具有相同长度且不含 <url> 的函数列表，并且顺序相同，那么它们的每个滤镜函数都将根据该滤镜函数的特定规则进行插值。

如果滤镜列表的长度不同，则会将较长列表中缺失的等效滤镜函数添加到较短列表的末尾。添加的函数使用其初始的、无滤镜修改的值。然后，所有列出的滤镜都将根据其滤镜函数的特定规则进行插值。否则，将使用离散插值。

正式定义

初始值none
应用于所有元素；在 SVG 中，它适用于除 <defs> 元素外的容器元素以及所有图形元素
继承性否
计算值同指定值
动画类型一个滤镜函数列表

正式语法

filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

示例

应用滤镜函数

filter 属性应用于第二张图片，使其图像和边框都变灰并模糊。

css
img {
  border: 5px solid yellow;
}
/* Gray the second image by 40% and blur by 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

重复使用滤镜函数

滤镜函数按其出现的顺序应用。同一个滤镜函数可以重复使用。

css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

滤镜是按顺序应用的。这就是为什么投影的颜色不相同：第一个投影的色相被 hue-rotate() 函数改变了，而第二个则没有。

规范

规范
滤镜效果模块第 1 级
# FilterProperty

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们共同完成。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.