CSS 播客 - 023:过滤器
假设您需要构建一个元素,该元素在图片顶部有一个略不透明的磨砂玻璃效果。文本必须是实时文本,而不是图片。您该怎么做?
通过结合使用 CSS 滤镜和 backdrop-filter
,我们可以实时应用所需效果并对所需内容进行模糊处理。模糊处理和不透明度是可用的滤镜中的两种,下面我们快速了解一下它们的用途和使用方法。
filter
属性
您可以将以下一个或多个过滤条件应用为 filter
的值。如果错误应用过滤条件,为 filter
定义的其余过滤条件将无法正常工作。
blur
这会应用高斯模糊,并且您可以传递的唯一参数是 radius
,它表示应用的模糊程度。需要是一个长度单位,例如 10px
。不接受百分比。
.my-element {
filter: blur(0.2em);
}
brightness
如需调高或调低元素的亮度,请使用亮度函数。亮度值以百分比表示,未更改的图片表示为值 100%。 值为 0% 会使图片完全变为黑色,因此,介于 0% 和 100% 之间的值会降低图片的亮度。使用大于 100% 的值来提高亮度。
.my-element {
filter: brightness(80%);
}
contrast
设置一个介于 0% 和 100% 之间的值,可分别降低或提高对比度。
.my-element {
filter: contrast(160%);
}
grayscale
您可以通过使用 1
作为 grayscale()
的值来应用完全灰度效果,或者使用 0
以获得完全饱和的元素。您也可以使用百分比或小数值来仅应用部分灰度效果。
如果您未传递任何参数,元素将变为完全灰度模式。如果您传递的值大于 100%,则上限值为 100%。
.my-element {
filter: grayscale(80%);
}
invert
和 grayscale
一样,您可以将 1
或 0
传递给 invert()
函数以将其开启或关闭。开启后,元素的颜色会完全颠倒显示。您还可以使用百分比或小数值仅应用部分颜色反转。
如果您没有向 invert()
函数传递任何参数,则元素将被完全反转。
.my-element {
filter: invert(1);
}
opacity
opacity()
过滤器的工作方式与 opacity
属性类似,您可以通过传递数字或百分比来提高或降低不透明度。如果未传递任何参数,元素将完全可见。
.my-element {
filter: opacity(0.3);
}
saturate
饱和度过滤条件与 brightness
过滤条件非常相似,并接受相同的参数:数字或百分比。
saturate
会增加或降低色彩饱和度,而不是调高或调低亮度效果。
.my-element {
filter: saturate(155%);
}
sepia
您可以使用此滤镜添加深褐色调效果,其作用类似于 grayscale()
。深褐色调是一种摄影技术,可将黑色色调转换为棕色调,让色调升温。
您可以将数字或百分比作为 sepia()
的参数传递,以增大或减小效果。不传递任何参数即可添加完整的棕褐色效果(等同于 sepia(100%)
)。
.my-element {
filter: sepia(70%);
}
hue-rotate
您在颜色课程中了解了 hsl
中的色调如何引用色轮的旋转,并且此滤镜的工作原理类似。如果您传递角度(例如角度或转弯),则会改变元素所有颜色的色调,改变其引用的色轮部分。如果您不传递任何参数,则系统不会执行任何操作。
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
您可以像在设计工具(如 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
借助 url
滤镜,您可以应用来自关联的 SVG 元素或文件的 SVG 滤镜。您可以在此处详细了解 SVG 滤镜
背景幕滤镜
backdrop-filter 属性接受所有与 filter
相同的过滤条件函数值。backdrop-filter
和 filter
之间的区别在于,backdrop-filter
属性仅将滤镜应用于背景,而 filter
属性会将其应用于整个元素。
本课程开头的示例就是一个绝佳的示例,因为您不希望对文本进行模糊处理,最好也不需要添加额外的 HTML 元素。通过仅将滤镜应用于背景,可以实现这一目标。
检查您的掌握程度
检验您对过滤条件知识的掌握情况
以下哪些是 CSS 过滤器函数?
grayscale()
invert()
flip()
multiply()
blur()
brightness()
CSS 是否可以使用 SVG 滤镜?
url()
过滤函数,