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():超饱和或去饱和输入的图像
sepia():将图像转为棕褐色
常见应用
1. 图像变黑变亮
滤镜中的brightness用于调整图像的明暗度。默认值是1;
小于1时图像变暗,为0时显示为全黑图像
大于1时图像显示比原图更明亮
原来的图片会偏暗一些,加了滤镜之后,整体色彩就更鲜明了
2. 图像变灰色
filter: grayscale(100%);
3. 图像模糊
filter: blur 对元素自身产生模糊效果
backdrop-filter: blur 对元素后面区域添加模糊效果
更多漂亮的滤镜效果,可参考: 巧用CSS filter,让你的网站更加酷炫
参考:https://juejin.cn/post/7221366548076871737
标签:函数,模糊,用法,filter,滤镜,图像,blur,css From: https://www.cnblogs.com/mengff/p/17492735.html