共计 3369 个字符，预计需要花费 9 分钟才能阅读完成。
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>咱们定义一张照片在网页地方，先不做任何解决。
这是原图出现的成果。
接下来咱们看 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% 时候的成果。
另外，如果应用该成果参数里没值的话，也会默认以 1，即 100% 为值取值，即如上面设置。
.filter {filter: grayscale();
}sepia
sepia 代表的是照片褐色，相似于大部分美图软件里的念旧性能的那种成果，取值也是 0 -1，和 grayscale 一样。
.filter {filter: sepia(1);
}hue-rotate
hue-rotate 用来扭转图片的色相，默认值为 0deg，取值是角度（angle）。
.filter {filter: hue-rotate(90deg);
}
hue-rotate 个别配合 css 动画应用，能够出现不一样成果。比方电池充电的动画，随着高度在纵坐标上移，hue-rotate 的值逐步扭转，这里因为无奈上传 git 图片，只能看下动态图片：
brightness
brightness 能够扭转图片的亮度，默认值为 100%, 即 1。
.filter {filter: brightness(2);
}
contrast
contrast 代表对比度，这个属性取值和饱和度 saturate 相似，取值也是数字。
.filter {filter: contrast(2.5);
}这里咱们演示对比度是 250% 时候的成果，如下图：
drop-shadow
drop-shadow 这个属性相似于 box-shadow，给图片加暗影。
.filter {filter: drop-shadow(20px 20px 10px 20px #000) /** 程度暗影地位，垂直暗影地位，含糊间隔，暗影色彩 **/
}
backdrop-filter 属性
咱们回过头来在看 backdrop-filter 属性以下几点特点
- backdrop-filter 是使透过该层的底部元素模糊化
- backdrop-filter 属性能够让你为一个元素前面区域增加图形成果（如含糊或色彩偏移）。因为它实用于元素 背地 的所有元素，为了看到成果，必须使元素或其背景至多局部通明。
- backdrop-filter 目前兼容性不佳，尤其是安卓挪动端。
下面这些只看文字不好了解，我间接上代码：
<div class="container">
<div class="content"></div>
<div class="filter">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus voluptatem velit quod placeat?
Cupiditate,
corporis, et tempore laudantium consequatur labore distinctio nisi inventore totam vero cum est saepe quos
ad
</div>
</div>咱们定义了一个 container 元素 div，子元素有 content 和 filter 两个 div 元素。
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: aqua;
}
.content {
position: absolute;
bottom: 40%;
width: 300px;
height: 300px;
background-color: blueviolet;
}
.filter {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
font-size: 32px;
z-index: 20;
}以上元素，咱们能够失去如下布局：
这时候，咱们将 filter 元素改为
.filter {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
filter: blur(5px);
z-index: 20;
font-size: 32px;
}从代码看，咱们增加了 filter: blur(5px)。如下图展现成果，咱们发现 filter 元素 div 和其中的文字内容，都被模糊化了。
但如果如下批改款式
.filter {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
backdrop-filter: blur(5px);
z-index: 20;
font-size: 32px;
}应用 backdrop-filter: blur(5px)元素，则失去如下图排版
咱们发现，只有 filter 元素 DIV 被模糊化，而子内容文字并没有受到任何影响。
.filter {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: chocolate;
backdrop-filter: blur(5px);
z-index: 20;
font-size: 32px;
}然而，如果依照以上代码，给 filter 元素设置了背景色 background-color: chocolate，这时候，就简直看不到模糊化的成果。
或者，咱们把 content 元素 DIV 背景色去除，
.content {
position: absolute;
bottom: 40%;
width: 300px;
height: 300px;
}
这就是为什么说，为了看到成果，必须使元素或其背景至多局部通明。
咱们发现，backdrop-filter 属性还只能在局部最新版浏览器上有成果，所以目前来看，此属性的兼容性较差。
