css滤镜基本用法

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，让你的网站更加酷炫 

4. 根据背景色自动切换黑白文字

.text{
    filter: grayscale(1) contrast(999) invert(1)
}

3个滤镜

灰度滤镜（grayscale），可以将彩色的文字转换成灰色
对比度滤镜（contrast），可以极大的增强对比度，黑的更黑，白的更白，如果是浅灰，那就变成白色，如果是深灰，那就变成黑色
反转滤镜（invert），可以翻转颜色，颠倒黑白

6. 生成同色系按钮

调整按钮色相可生成同色系的其他按钮

.btn { filter: hue-rotate(20deg) }

7. 暗黑模式

html {
    filter: invert(90%) hue-rotate(180deg);
    transition: color 300ms, background-color 300ms;
}

img, video, svg, .exclude {
    filter: invert(110%) hue-rotate(180deg);
    opacity: .8;
}

invert滤镜可以帮助反转应用程序的颜色方案，因此，黑色变成了白色，白色变成了黑色，所有颜色也是如此。因此，黑变白，白变黑，所有颜色也是如此
hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色
invert 将所有色值反转，hue-rotate 将黑白以外的其它主色调再反转回来（防止页面主题色出现大的变化）；
网上的 invert 通常取值为 100%，但是这样反转得到的黑色往往太过黑，眼睛看起来有点累，因此 90% 是一个更合理的值；
将图片、视频等其它不需要被反转的元素再反转回来，并加一个透明度，让其不那么刺眼
如果 html 反转 90%，则图片等元素需要反转 110%
.exclude 是其他需要排除的元素
transition 使得切换变得不那么突然

 

 

 

参考：你不知道的CSS篇 - filter函数用途
         CSS 如何根据背景色自动切换黑白文字
         简单 CSS 实现暗黑模式