css中filter属性和backdrop-filter的应⽤与区别详解
filter和backdrop-filter具有⼀定区别：
Filter不仅仅作⽤于当前元素，后代元素也会继承这个属性，作⽤于⼀个空背景元素则没有效果。
backdrop-filter 是使透过该层的底部元素模糊化
backdrop-filter属性可以让你为⼀个元素后⾯区域添加图形效果（如模糊或颜⾊偏移）。因为它适⽤于元素背后的所有元素，为了看到效果，必须使元素或其背景⾄少部分透明。
backdrop-filter⽬前兼容性不佳，尤其是安卓移动端。
filter属性
我们先来说说filter属性，css3中的filter属性简单易⽤且强⼤，这些效果作⽤在图⽚上可以实现⼀些特有的特效。⽽且⽬前主流浏览器都已经⽀持了这个属性。
从上图来看，⼤部分浏览器的兼容性都是不错的。
我们还是直接⽤代码来看。
body {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
}
.img {
width: 500px;
height: 500px;
}
<body>
<img src="./img/kyoto.jpg" class="img filter">
</body>css中的position属性
我们定义⼀张照⽚在⽹页中央，先不做任何处理。
这是原图呈现的效果。
接下来我们看filter的⼏个⽐较重要的属性。
opacity
opacity 代表透明度，值为0-1之间的⼩数，值越⼤透明度越低。.filter{
filter: opacity(.3);
}
如下图展⽰：
blur
blur可以设置图⽚使⽤⾼斯模糊效果，单位值是px。所谓⾼斯模糊，就是指⼀个图像与⼆维⾼斯分布的概率密度函数做卷积。
简单点说：⾼斯模糊常常⽤来模拟⼈眼中的物体变远、变快的效果。在照⽚处理中，我们常常将背景施以⾼斯模糊，使得背景仿佛变远了，从⽽突出前景的⼈物或物体。⼀些所谓“先拍照，后对焦”的技术利⽤的也是⾼斯模糊这个效果。若想弄出视点飞快移动的效果，也可以对背景使⽤⾼斯模糊。
.filter {
filter: blur(2px);
}
invert
invert 可以设定反⾊，值为0-1之间的⼩数。
.filter {
filter: invert(1);
}
saturate
saturate可以设定照⽚饱和度，取值范围为数字即可，默认值1，即100%。.filter {
filter: saturate(5);
}
⽐如这⾥我设置饱和度是500%，如下图效果：
grayscale
grayscale代表灰度，取值在0-1之间,。
.filter {
filter: grayscale(1);
}
下图是grayscale为1，即灰度是100%时候的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。