滤镜

CSS 播客 - 023：滤镜

假设您需要构建一个元素，该元素具有轻微不透明的磨砂玻璃效果，覆盖在图像的顶部。文本需要是实时文本，而不是图像。您该如何做到这一点？

CSS 滤镜和 backdrop-filter 的组合使我们能够实时应用效果并模糊所需内容。模糊和不透明度是众多可用滤镜中的两个，因此让我们快速了解一下它们的作用以及如何使用它们。

filter 属性

浏览器支持

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 9.1.

来源

您可以将以下一个或多个滤镜作为 filter 的值应用。如果您错误地应用了滤镜，则为 filter 定义的其余滤镜将无法工作。

blur

这将应用高斯模糊，您可以传递的唯一参数是 radius，即 应用的模糊量。这需要是一个长度单位，例如 10px。不接受百分比。

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

brightness

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

要增加或减少元素的亮度，请使用 brightness 函数。亮度值以百分比表示，未更改的图像表示为 100%。值为 0% 会使图像完全变黑，因此 0% 到 100% 之间的值会使图像亮度降低。使用超过 100% 的值可增加亮度。

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

contrast

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

设置介于 0% 和 100% 之间的值以分别降低或增加对比度。

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

grayscale

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

您可以使用 1 作为 grayscale() 的值来应用完全灰度效果，或使用 0 来获得完全饱和的元素。您也可以使用百分比或十进制值仅应用部分灰度效果。如果您不传递任何参数，则元素将完全灰度化。如果您传递的值大于 100%，则它将被限制为 100%。

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

invert

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

就像 grayscale 一样，您可以将 1 或 0 传递给 invert() 函数以将其打开或关闭。当它打开时，元素的颜色会完全反转。您也可以使用百分比或十进制值仅应用部分颜色反转。如果您不向 invert() 函数传递任何参数，则元素将完全反转。

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

opacity

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

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

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

saturate

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

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

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

sepia

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

您可以使用此滤镜添加棕褐色调效果，其工作方式类似于 grayscale()。棕褐色调是一种摄影印刷技术，可将黑色调转换为棕色调以使其变暖。您可以传递数字或百分比作为 sepia() 的参数，这将增加或减少效果。不传递任何参数会添加完整的棕褐色调效果（相当于 sepia(100%)）。

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

hue-rotate

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

您在颜色课程中了解了 hsl 中的色调如何引用色轮的旋转，并且此滤镜的工作方式类似。如果您传递一个角度，例如度或圈数，它会移动元素所有颜色的色调，从而改变它引用的色轮部分。如果您不传递任何参数，它将不执行任何操作。

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

drop-shadow

浏览器支持

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

来源

您可以应用像在设计工具（如 Photoshop）中使用 drop-shadow 一样的曲线贴合阴影。此阴影应用于 alpha 蒙版，这使其对于向剪切图像添加阴影非常有用。drop-shadow 滤镜采用阴影参数，其中包含空格分隔的 offset-x、offset-y、blur 和颜色值。它几乎与 box-shadow 相同，但不支持 inset 关键字和 spread 值。

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

在阴影模块中了解有关不同类型阴影的更多信息。

url

浏览器支持

  • Chrome: 5.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 6.

来源

url 滤镜允许您从链接的 SVG 元素或文件应用 SVG 滤镜。您可以在此处阅读有关 SVG 滤镜的更多信息

背景滤镜

浏览器支持

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

来源

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

本课程开始时的示例就是一个完美的例子，因为您不希望文本模糊，并且理想情况下您不想添加额外的 HTML 元素。能够仅将滤镜应用于背景即可实现这一点。

检查您的理解程度

测试您对滤镜的了解

以下哪些是 CSS 滤镜函数？

grayscale()
🎉
invert()
🎉
flip()
再试一次！
multiply()
再试一次！
blur()
🎉
brightness()
🎉

CSS 可以使用 SVG 滤镜吗？

是
url() 滤镜函数实现了这一点
否
再试一次！