过滤条件

CSS 播客 - 第 023 集：过滤器

假设您需要构建一个元素，该元素位于图片顶部，具有略微不透明的磨砂玻璃效果。文字需要是实时文字，而不是图片。您是怎么做到的？

通过结合使用 CSS 滤镜和 backdrop-filter，我们可以实时应用效果并模糊处理所需内容。模糊处理和不透明度是众多可用滤镜中的两个，下面我们来快速了解一下它们的用途和使用方法。

注意 ：在图片上方放置文本时，请务必注意，如果用户的浏览器不支持滤镜效果，文本仍应可读。

filter 属性

Browser Support

• 53
• 12
• 35
• 9.1

Source

您可以将以下一个或多个过滤条件作为 filter 的值应用。如果您错误地应用了过滤条件，则为 filter 定义的其余过滤条件将无法正常运行。

blur

这会应用高斯模糊处理，您可以传递的唯一实参是 radius，即应用的模糊处理程度。此值需要是长度单位，例如 10px。不接受百分比。

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

如需调高或调低元素的亮度，请使用亮度函数。亮度值以百分比表示，未经更改的图片的亮度值为 100%。 值为 0% 会将图片完全变为黑色，因此介于 0% 到 100% 之间的值会使图片变暗。使用大于 100% 的值可提高亮度。

.my-element {
    filter: brightness(80%);
}

注意： 您还可以在 brightness 等过滤条件中使用小数值，而不是百分比值。如需使用小数设置 80% 亮度，请写入 0.8。

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

设置一个介于 0% 到 100% 之间的值，以分别降低或提高对比度。

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

您可以使用 1 作为 grayscale() 的值或 0 来应用完全灰度效果，以获得完全饱和的元素。您还可以使用百分比值或小数值来仅应用部分灰度效果。如果您不传递任何参数，元素将完全采用灰度模式。 如果您传递的值大于 100%，则上限为 100%。

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

与 grayscale 一样，您可以将 1 或 0 传递给 invert() 函数以开启或关闭它。开启后，元素的颜色会完全翻转。您还可以使用百分比值或小数值来仅应用部分颜色反转。如果您未向 invert() 函数传递任何参数，则元素将完全反转。

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

opacity() 过滤器的运作方式与 opacity 属性完全相同，您可以传递数字或百分比来增加或减少不透明度。如果您未传递任何参数，则元素会完全可见。

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

饱和度滤镜与 brightness 滤镜非常相似，并且接受相同的参数：数字或百分比。saturate 会增加或减少颜色饱和度，而不是增加或减少亮度效果。

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

您可以使用此滤镜添加仿 Sepia 色调效果，其运作方式与 grayscale() 类似。棕褐色是一种摄影打印技术，可将黑色转换为棕色，使其看起来更温暖。 您可以将数字或百分比作为 sepia() 的参数传递，以增强或减弱效果。不传递任何参数会添加完整的 Sepia 效果（相当于 sepia(100%)）。

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

您在颜色课程中了解了 hsl 中的色相如何引用色轮的旋转，而此滤镜的运作方式也类似。如果您传递角度（例如度数或圈数），它会使元素的所有颜色的色相发生变化，从而更改它引用的颜色轮的部分。如果您不传递任何参数，则不会执行任何操作。

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

您可以像在设计工具（例如 Photoshop）中使用 drop-shadow 一样应用贴合曲线的阴影。此阴影会应用于 Alpha 遮罩，因此非常适合为剪裁图片添加阴影。 drop-shadow 过滤器接受一个阴影参数，该参数包含以空格分隔的 offset-x、offset-y、blur 和 color 值。它与 box-shadow 几乎完全相同，但不支持 inset 关键字和展开值。

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

如需详细了解不同类型的阴影，请参阅 shadows 模块。

url

Browser Support

• 5
• 12
• 3
• 6

Source

借助 url 过滤器，您可以应用关联的 SVG 元素或文件中的 SVG 滤镜。您可以点击此处详细了解 SVG 滤镜

背景幕滤镜

Browser Support

• 76
• 79
• 103
• 18

Source

backdrop-filter 属性接受与 filter 相同的所有过滤器函数值。backdrop-filter 和 filter 之间的区别在于，backdrop-filter 属性仅将过滤器应用于背景，而 filter 属性将其应用于整个元素。

本课程开头的示例就是一个很好的示例，因为您不希望文字模糊不清，并且最好不要添加额外的 HTML 元素。这样一来，您就可以仅对背景应用滤镜。

检查您的理解情况

测试您对过滤条件的了解程度

以下哪些是 CSS 过滤器函数？

grayscale()

🎉

invert()

🎉

flip()

再试一次！

multiply()

再试一次！

blur()

🎉

brightness()

🎉

CSS 能否使用 SVG 滤镜？

是

url() 过滤器函数可实现此目的

否

再试一次！