MEANING
filter
属性用于为元素添加图形效果或滤镜效果。通过设置不同的 filter
值,可以实现元素模糊、透明、提高对比度等多种视觉效果。
https://codepen.io/Zhaojjjjjj/pen/RweqMbW
BASIC
filter: <filter-function> [<filter-function>]*;
其中 <filter-function>
表示一个滤镜函数,该函数实现了一种特定的图形处理效果。目前常见的滤镜函数包括:
blur()
:模糊效果;brightness()
:亮度调节;contrast()
:对比度调节;grayscale()
:灰度转换;hue-rotate()
:色相旋转;invert()
:颜色反转;opacity()
:透明度调节;saturate()
:饱和度调节;sepia()
:棕褐色转换;
此外还有其他一些滤镜函数,如 drop-shadow()
可用于添加投影效果、url()
可用于加载 SVG 或其他 web 图形资源,具体使用时需要根据实际情况进行选择。
在应用多个滤镜函数时,可以使用空格分隔多个函数,它们将按顺序依次叠加,以生成最终的滤镜效果。
需要注意的是,CSS 中的 filter
属性并不是所有浏览器都支持的,且在早期浏览器中可能会出现兼容性问题。在使用 filter
属性时应对其兼容性进行测试和处理。
EXAMPLE
1.添加模糊效果
.blur {
filter: blur(5px);
}
.blur
元素添加一个包含 5 像素模糊半径的模糊效果。
2.调节亮度与对比度
.adjust {
filter: brightness(150%) contrast(150%);
}
.adjust
元素的亮度和对比度都增加了 50%。
3.设置透明度
.opacity {
filter: opacity(30%);
}
.opacity
元素的透明度设置为 30%(即变得更加半透明)。
4.添加投影效果
.shadow {
filter: drop-shadow(10px 10px 5px #888888);
}
.shadow
元素创建一个向右下方偏移 10 像素、水平与竖直方向均扩展 5 像素的深灰色投影效果。
除此之外,还有许常用的滤镜效果可以结合 filter
属性实现。需要注意的是,在使用滤镜效果时应当避免过度使用,以保持页面的可读性和可操作性。