CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)

文章目录

  • filter 滤镜
    • blur() 模糊度
      • 例子 渐变光晕
    • brightness() 元素亮度
    • contrast() 对比度
    • grayscale() 元素灰度
    • hue-rorate() 色相
    • opacity() 透明度
    • invert() 反转颜色
    • saturate() 饱和度
  • backdrop-filter 蒙版,滤镜
    • 例子 卷轴展开

filter 滤镜

动图为效果添加前后对比
经常用ps的应该知道这些的属性的含义,可以自己试一试看看不同参数都有什么样的效果。

blur() 模糊度

作用是调整模糊度,单位像素。

filter: blur(10px);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第1张图片

例子 渐变光晕

其实是两个相同的div叠加,其中一个加上了模糊度。
CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第2张图片




    
    
    Document
    


    "box">

    


brightness() 元素亮度

作用是调整元素的亮度,单位百分数或小数,小于1暗,大于亮。

filter: brightness(0.5);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第3张图片

contrast() 对比度

作用是调整元素的对比度,单位是百分数。
大于1提高对比度,小于1降低对比度。
这里加个图片吧,更好的展示此效果。

filter: contrast(2);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第4张图片

grayscale() 元素灰度

作用是调整元素的灰度,单位是百分数。
最大是百分之百。
网站需要在特殊节日变成灰色就可以给body加上这个属性。 让整个网站变成灰色调。

filter: grayscale(1);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第5张图片

hue-rorate() 色相

调整元素的色相,单位是角度。

filter: hue-rotate(80deg);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第6张图片

opacity() 透明度

调整元素的透明度,单位是百分数。

filter: opacity(0.5);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第7张图片

invert() 反转颜色

invert() 调整元素的反转输入颜色,单位是百分数。

filter: invert(1);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第8张图片

saturate() 饱和度

改变图像饱和度。值为 0% 则是完全不饱和,值为 100% 则图像无变化。超过 100% 则增加饱和度。

filter: saturate(2);

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)_第9张图片

backdrop-filter 蒙版,滤镜

与filter用法相同,只不过其是对其后面元素起作用的。
可以理解为filter作用于物体,而backdrop-filter相当于一个幕布,遮住的才会变化。还是不理解没关系,看下面的例子就明白了。

例子 卷轴展开




    
    
    Document
    


    
"box"> "1.jpg" alt="">

你可能感兴趣的:(CSS,css,前端)