filter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

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

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

尝试一下

语法

css
/* <filter-function> 值 */
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");

/* 多个滤镜 */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* 不使用滤镜 */
filter: none;

/* 全局值 */
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()> 的相同长度的函数列表,则会根据其指定的规则对其每个滤镜函数进行插值

如果它们的长度不同,较长列表中缺少的等效滤镜函数将以其初始的、未被滤镜修改的值为参数被添加到较短列表的尾部,然后所有的滤镜函数根据其指定的规则插值。否则,将使用离散插值。

形式定义

初始值none
适用元素all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
是否是继承属性
计算值as specified
动画类型a filter function list

形式语法

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 函数

filter 属性被应用于第二张图片,为其本身以及边框添加灰度和模糊效果。

css
img {
  border: 5px solid yellow;
}
/* 为第二张图像应用 40% 灰度并以 5px 进行模糊 */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="原图清晰" />
<img src="pencil.jpg" alt="该图像及其边框被应用了模糊和灰度效果" />

重复滤镜函数

滤镜函数按出现顺序应用。可以重复相同的滤镜函数。

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() 函数改变,而第二个阴影的色调没有被改变。

规范

Specification
Filter Effects Module Level 1
# FilterProperty

浏览器兼容性

BCD tables only load in the browser

参见