过滤

CSS 播客 - 023：过滤器

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

CSS 过滤条件和 backdrop-filter 的组合 让我们能够实时应用效果并对所需内容进行模糊处理 模糊处理和不透明度是许多可用滤镜中的两种 让我们快速了解一下它们的用途和使用方法。

filter 属性

浏览器支持

  • Chrome：53。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：9.1. <ph type="x-smartling-placeholder">

来源

您可以将以下一个或多个过滤条件作为 filter。 如果您误应用了某个过滤条件 为 filter 定义的其余过滤器将不起作用。

blur

这会应用高斯模糊，您可以传递的唯一参数是 radius， 也就是 应用的模糊程度。 该值必须是长度单位，例如 10px。不接受百分比。

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

brightness

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

要提高或降低元素的亮度， 使用亮度功能。 亮度值以百分比表示，而未更改图片的值则以 100% 表示。 值为 0% 会使图片变为全黑； 因此介于 0% 到 100% 之间的值会降低图片的亮度。 使用超过 100% 的值增加亮度。

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

contrast

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

设置 0% 到 100% 之间的值可分别降低或提高对比度。

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

grayscale

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

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

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

invert

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

与grayscale一样， 您可以将 1 或 0 传递给 invert() 函数，以将其开启或关闭。 启用此选项后，元素的颜色会完全反转。 您也可以使用百分比值或小数值仅应用部分颜色反转。 如果您没有向 invert() 函数传递任何参数， 该元素就会完全反转

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

opacity

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

opacity() 过滤条件的工作方式与 opacity 属性类似， 在这里，您可以传递数字或百分比来增加或减少不透明度。 如果您不传递任何参数，则该元素会完全可见。

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

saturate

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

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

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

sepia

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

你可以使用此滤镜添加深褐色色调效果，其工作原理类似于 grayscale()。 深褐色调是一种摄影打印技术，可将黑色色调转换为棕色色调，从而使其变暖。 您可以将数字或百分比作为 sepia() 的参数传递 以提高或降低效果 不传递任何参数会添加完全深褐色效果（等同于 sepia(100%)）。

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

hue-rotate

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

您了解了 hsl 中的色调如何引用 颜色课程，此过滤器的工作原理与之类似。 如果您传递角度（例如角度或转角）， 它可以改变元素所有颜色的色调 更改引用的色轮部分如果不传递任何参数，则不会执行任何操作。

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

drop-shadow

浏览器支持

  • Chrome：18。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：35。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

您可以像在设计工具中一样，应用拥抱曲线的阴影 例如 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

浏览器支持

  • Chrome：5. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：3. <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

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

背景幕滤镜

浏览器支持

  • Chrome：76。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：103。 <ph type="x-smartling-placeholder">
  • Safari：18。 <ph type="x-smartling-placeholder">

来源

背景幕过滤器 属性接受与 filter 完全相同的过滤函数值。 backdrop-filter 和 filter 的差值 backdrop-filter 属性仅将滤镜应用于背景， 其中，filter 属性会应用于整个元素。

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

检查您的理解情况

测试您对过滤条件的掌握情况

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

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

CSS 能否使用 SVG 滤镜？

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