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属性还只能在局部最新版浏览器上有成果，所以目前来看，此属性的兼容性较差。