2021-05-25

背景

基本概念

CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。

filter: <filter-function> [<filter-function>]* | none
filter: url(file.svg#filter-element-id)

<filter-function> 可以用于 filter 和 backdrop-filter 属性。它的数据类型由下列过滤器函数之一指定。每个函数需要一个参数，如果参数无效，则滤镜不会生效。以下是对滤镜函数含义的解释：

• blur()：模糊图像
• brightness() ：让图像更明亮或更暗淡
• contrast()：增加或减少图像的对比度
• drop-shadow()：在图像后方应用投影
• grayscale()：将图像转为灰度图
• hue-rotate()：改变图像的整体色调
• invert()：反转图像颜色
• opacity()：改变图像透明度
• saturate()：超饱和或去饱和输入的图像