过滤器

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

有几个 函数,例如 blur()contrast(),可帮助您实现预定义的效果。

尝试一下

语法

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;

使用函数时,请使用以下方法

css
filter: <filter-function> [<filter-function>]* | none;

您可以使用 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(),则它们的每个过滤器函数都会根据过滤器函数的特定规则进行 插值

如果过滤器列表长度不同,则从较长列表中添加缺少的等效过滤器函数到较短列表的末尾。添加的函数使用它们的初始值,即没有过滤器修改的值。然后根据过滤器函数的特定规则对所有列出的过滤器进行插值。否则,将使用离散插值。

正式定义

初始值
应用于所有元素;在 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()>

<url> =
<url()> |
<src()>

<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> ]? )

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

示例

应用过滤器函数

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

浏览器兼容性

BCD 表格仅在浏览器中加载

参见