CSS 播客 - 023:过滤器
假设您需要构建一个稍微不透明的元素, 一种叠加在图片顶部的磨砂玻璃效果。 文字必须是实时文字,而非图片。 该怎么做?
CSS 过滤条件和 backdrop-filter
的组合
让我们能够实时应用效果并对所需内容进行模糊处理
模糊处理和不透明度是许多可用滤镜中的两种
让我们快速了解一下它们的用途和使用方法。
filter
属性
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您可以将以下一个或多个过滤条件作为
filter
。
如果您误应用了某个过滤条件
为 filter
定义的其余过滤器将不起作用。
blur
这会应用高斯模糊,您可以传递的唯一参数是 radius
,
也就是
应用的模糊程度。
该值必须是长度单位,例如 10px
。不接受百分比。
.my-element {
filter: blur(0.2em);
}
brightness
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要提高或降低元素的亮度, 使用亮度功能。 亮度值以百分比表示,而未更改图片的值则以 100% 表示。 值为 0% 会使图片变为全黑; 因此介于 0% 到 100% 之间的值会降低图片的亮度。 使用超过 100% 的值增加亮度。
.my-element {
filter: brightness(80%);
}
contrast
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
设置 0% 到 100% 之间的值可分别降低或提高对比度。
.my-element {
filter: contrast(160%);
}
grayscale
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您可以通过使用 1
作为 grayscale()
的值来应用完全灰度效果,
或 0
以获得完全饱和的元素。
您也可以使用百分比值或小数值,以便仅应用部分灰度效果。
如果您不传递任何参数,该元素将是完全灰度模式。
如果您传递的值大于 100%,其上限将为 100%。
.my-element {
filter: grayscale(80%);
}
invert
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
与grayscale
一样,
您可以将 1
或 0
传递给 invert()
函数,以将其开启或关闭。
启用此选项后,元素的颜色会完全反转。
您也可以使用百分比值或小数值仅应用部分颜色反转。
如果您没有向 invert()
函数传递任何参数,
该元素就会完全反转
.my-element {
filter: invert(1);
}
opacity
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
opacity()
过滤条件的工作方式与 opacity
属性类似,
在这里,您可以传递数字或百分比来增加或减少不透明度。
如果您不传递任何参数,则该元素会完全可见。
.my-element {
filter: opacity(0.3);
}
saturate
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
饱和过滤条件与 brightness
过滤条件非常相似,并接受相同的参数:
数字或百分比
与调高或调低亮度效果不同
saturate
可提高或降低色彩饱和度。
.my-element {
filter: saturate(155%);
}
sepia
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
你可以使用此滤镜添加深褐色色调效果,其工作原理类似于 grayscale()
。
深褐色调是一种摄影打印技术,可将黑色色调转换为棕色色调,从而使其变暖。
您可以将数字或百分比作为 sepia()
的参数传递
以提高或降低效果
不传递任何参数会添加完全深褐色效果(等同于 sepia(100%)
)。
.my-element {
filter: sepia(70%);
}
hue-rotate
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您了解了 hsl
中的色调如何引用
颜色课程,此过滤器的工作原理与之类似。
如果您传递角度(例如角度或转角),
它可以改变元素所有颜色的色调
更改引用的色轮部分如果不传递任何参数,则不会执行任何操作。
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
借助 url
滤镜,您可以从关联的 SVG 元素或文件应用 SVG 滤镜。
您可以
点击此处详细了解 SVG 滤镜
背景幕滤镜
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
背景幕过滤器
属性接受与 filter
完全相同的过滤函数值。
backdrop-filter
和 filter
的差值
backdrop-filter
属性仅将滤镜应用于背景,
其中,filter
属性会应用于整个元素。
本课程开始时的例子就是完美的示例, 因为您不希望文本模糊,理想情况下也不想添加额外的 HTML 元素。 通过仅将滤镜应用于背景幕的功能可以实现这一目的。
检查您的理解情况
测试您对过滤条件的掌握情况
以下哪些是 CSS 过滤器函数?
flip()
multiply()
blur()
invert()
brightness()
grayscale()
CSS 能否使用 SVG 滤镜?