过滤条件

CSS 播客 - 023：过滤器

假设您需要构建一个元素，该元素在图片顶部有一个略不透明的磨砂玻璃效果。文本必须是实时文本，而不是图片。您该怎么做？

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

filter 属性

浏览器支持

  • 53
  • 12
  • 35
  • 9.1

来源

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

blur

这会应用高斯模糊，并且您可以传递的唯一参数是 radius，它表示应用的模糊程度。需要是一个长度单位，例如 10px。不接受百分比。

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

brightness

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

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

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

contrast

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

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

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

grayscale

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

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

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

invert

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

和 grayscale 一样，您可以将 1 或 0 传递给 invert() 函数以将其开启或关闭。开启后，元素的颜色会完全颠倒显示。您还可以使用百分比或小数值仅应用部分颜色反转。 如果您没有向 invert() 函数传递任何参数，则元素将被完全反转。

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

opacity

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

opacity() 过滤器的工作方式与 opacity 属性类似，您可以通过传递数字或百分比来提高或降低不透明度。如果未传递任何参数，元素将完全可见。

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

saturate

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

饱和度过滤条件与 brightness 过滤条件非常相似，并接受相同的参数：数字或百分比。 saturate 会增加或降低色彩饱和度，而不是调高或调低亮度效果。

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

sepia

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

您可以使用此滤镜添加深褐色调效果，其作用类似于 grayscale()。深褐色调是一种摄影技术，可将黑色色调转换为棕色调，让色调升温。 您可以将数字或百分比作为 sepia() 的参数传递，以增大或减小效果。不传递任何参数即可添加完整的棕褐色效果（等同于 sepia(100%)）。

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

hue-rotate

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

您在颜色课程中了解了 hsl 中的色调如何引用色轮的旋转，并且此滤镜的工作原理类似。如果您传递角度（例如角度或转弯），则会改变元素所有颜色的色调，改变其引用的色轮部分。如果您不传递任何参数，则系统不会执行任何操作。

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

drop-shadow

浏览器支持

  • 18
  • 12
  • 35
  • 6

来源

您可以像在设计工具（如 Photoshop）中一样，使用 drop-shadow 来应用弯曲的阴影。该阴影应用于 Alpha 蒙版，对于向刘海屏图片添加阴影非常有用。 drop-shadow 过滤器接受一个阴影参数，该参数包含以空格分隔的 offset-x、offset-y、blur 和 color 值。它与 box-shadow 几乎完全相同，但不支持 inset 关键字和分散值。

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

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

url

浏览器支持

  • 5
  • 12
  • 3
  • 6

来源

借助 url 滤镜，您可以应用来自关联的 SVG 元素或文件的 SVG 滤镜。您可以在此处详细了解 SVG 滤镜

背景幕滤镜

浏览器支持

  • 76
  • 17
  • 103
  • 9

来源

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

本课程开头的示例就是一个绝佳的示例，因为您不希望对文本进行模糊处理，最好也不需要添加额外的 HTML 元素。通过仅将滤镜应用于背景，可以实现这一目标。

检查您的掌握程度

检验您对过滤条件知识的掌握情况

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

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

CSS 是否可以使用 SVG 滤镜？

是
借助 url() 过滤函数，
否
再试一次！