CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）

您所在的位置：网站首页 › 如何复制滤镜特效 › CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）

CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）

2024-07-02 07:54| 来源: 网络整理| 查看: 265

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

filter 滤镜

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

blur() 模糊度

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

filter: blur(10px);

在这里插入图片描述

例子渐变光晕

其实是两个相同的div叠加，其中一个加上了模糊度。在这里插入图片描述

Document *{ margin:0; padding:0; } body{ display: flex; height:100vh; justify-content: center; align-items: center; background: #000; } .box{ width:300px; height: 400px; background: linear-gradient(30deg,#3498db,#9b59b6); border-radius: 5px; position: relative; } .box::before{ content:""; width:120%; height: 120%; position: absolute; background: red; z-index: -1; top:-10%; left:-10%; background: linear-gradient(30deg,#3498db,#9b59b6); filter:blur(70px); } brightness() 元素亮度

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

filter: brightness(0.5);

在这里插入图片描述

contrast() 对比度

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

filter: contrast(2);

在这里插入图片描述

grayscale() 元素灰度

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

filter: grayscale(1);

在这里插入图片描述

hue-rorate() 色相

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

filter: hue-rotate(80deg);

在这里插入图片描述

opacity() 透明度

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

filter: opacity(0.5);

在这里插入图片描述

invert() 反转颜色

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

filter: invert(1);

在这里插入图片描述

saturate() 饱和度

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

filter: saturate(2);

在这里插入图片描述

backdrop-filter 蒙版，滤镜

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

例子卷轴展开

在这里插入图片描述

Document *{ margin:0; padding:0; } body{ display: flex; height:100vh; justify-content: center; align-items: center; } .box{ display: flex; width:60%; object-fit: cover; object-position: center top; position: relative; } .box img{ height:600px; width:100%; object-fit: cover; } .box::before{ content:""; width:100%; height: 100%; background: rgb(255, 255, 255, 0.4); position: absolute; right:0; backdrop-filter: blur(10px); border-left: 5px solid #000; transition: 5s ease; } .box:hover::before{ width: 0; border-left: 10px solid #000; } span""/span

【本文地址】

公司简介

联系我们

CSS：filter滤镜 详解（用法 + 代码 + 例子 + 效果）

CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）