CSS：权威指南，第 5 版

第 20 章 滤镜 滤镜、混合、剪切和遮罩

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

有几种特殊属性允许作者使用可视化过滤器改变元素的外观，指定不同的方法将元素与它们后面的东西进行可视化混合，以及通过显示部分和隐藏其他部分来改变元素的表现形式。 虽然这些概念看似互不相关，但它们都有一个共同点：允许以以前难以实现或不可能实现的方式改变元素。

CSS 过滤器

CSS提供了一种方法，通过filter 属性，将内置视觉滤镜效果以及页面或外部文件中定义的自定义滤镜应用到元素中。

过滤

价值观	[none |blur() |brightness() |contrast() |drop-shadow() |grayscale() |hue-rotate() |invert() |opacity() |sepia() |saturate() |url() ]#
初始值	none
适用于	所有元素（在 SVG 中，适用于所有图形元素和所有容器元素，但<defs> 元素除外）
计算值	已宣布
继承	没有
动画	是

值语法允许使用空格分隔的过滤函数列表，每个过滤函数依次应用。因此，在声明filter: opacity(0.5) blur(1px); 的情况下，不透明度会被应用到元素上，然后半透明的结果会被模糊化。 如果顺序颠倒，应用顺序也会颠倒：完全不透明的元素被模糊，模糊后的结果变成半透明。

CSS规范在讨论filter 时谈到了 "输入图像"，但这并不意味着filter 只能用于图像。 任何 HTML 元素都可以被过滤，所有图形 SVG 元素都可以被过滤。 输入图像是渲染元素过滤前的视觉副本。 过滤器应用于该输入，然后将最终过滤结果呈现到显示媒介（如设备显示屏）上。

所有允许使用的值（url() 除外）都是函数值，每个函数允许使用的值类型取决于相关函数。 为便于理解，我们将这些函数分为几大类。

基本过滤器

以下滤镜都是基本滤镜，它们所产生的变化与其名称直接对应--模糊、阴影和不透明度变化：

blur( <length>)

使用高斯模糊法模糊元素的内容，其标准偏差由所提供的 <length> 所提供的值定义，其中0 的值会使元素保持不变。 不允许使用负长度。

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

对元素应用透明度过滤器，其方式与opacity 属性非常相似，0 的值会产生一个完全透明的元素，而1 或100% 的值会使元素保持不变。 不允许使用负值。 允许使用大于1 和100% 的值，但在计算最终值时，会将其剪切为1 或100% 。

警告

该规范明确指出，filter: opacity() 并不是 opacity 属性的替代品或速记符号，事实上，两者都可以应用于同一元素，从而产生一种双重透明度。

drop-shadow( <length>{2,3} <color>?)

创建与元素 alpha 通道形状相匹配的 阴影，并使用模糊效果和可选颜色。 长度和颜色的处理方法与属性box-shadow 相同，这意味着前两个 <length> 值可以是负值，但第三个值（定义模糊）不能是负值。 与 box-shadow 不同的是，inset 值是不允许的。要应用多个阴影，请提供多个空格分隔的drop-shadow() 函数；与box-shadow 不同的是，逗号分隔的阴影在这里不起作用。 如果没有提供 <color> 值，则使用的颜色与该元素的 ...