关于前端:css中filter属性和backdropfilter的应用与区别

filter 和 backdrop-filter 具备肯定区别：

Filter 不仅仅作用于以后元素，后辈元素也会继承这个属性，作用于一个空背景元素则没有成果。
backdrop-filter 是使透过该层的底部元素模糊化
backdrop-filter 属性能够让你为一个元素前面区域增加图形成果（如含糊或色彩偏移）。因为它实用于元素背地的所有元素，为了看到成果，必须使元素或其背景至多局部通明。
backdrop-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 代表透明度，值为 0 - 1 之间的小数，值越大透明度越低。

.filter{filter: opacity(.3);
}

如下图展现：

blur 能够设置图片应用高斯含糊成果，单位值是 px。所谓高斯含糊，就是指一个图像与二维高斯分布的概率密度函数做卷积。

简略点说：高斯含糊经常用来模仿人眼中的物体变远、变快的成果。在照片解决中，咱们经常将背景施以高斯含糊，使得背景好像变远了，从而突出前景的人物或物体。一些所谓“先拍照，后对焦”的技术利用的也是高斯含糊这个成果。若想弄出视点飞快挪动的成果，也能够对背景应用高斯含糊。

.filter {filter: blur(2px);
}

invert 能够设定反色，值为 0 - 1 之间的小数。

.filter {filter: invert(1);
}

saturate 能够设定照片饱和度，取值范畴为数字即可，默认值 1，即 100%。

.filter {filter: saturate(5);
}

比方这里我设置饱和度是 500%，如下图成果：

grayscale 代表灰度，取值在 0 - 1 之间,。

.filter {filter: grayscale(1);
}

下图是 grayscale 为 1，即灰度是 100% 时候的成果。

另外，如果应用该成果参数里没值的话，也会默认以 1，即 100% 为值取值，即如上面设置。

.filter {filter: grayscale();
}

sepia 代表的是照片褐色，相似于大部分美图软件里的念旧性能的那种成果，取值也是 0 -1，和 grayscale 一样。

.filter {filter: sepia(1);
}

hue-rotate 用来扭转图片的色相，默认值为 0deg，取值是角度（angle）。

.filter {filter: hue-rotate(90deg);
}

hue-rotate 个别配合 css 动画应用，能够出现不一样成果。比方电池充电的动画，随着高度在纵坐标上移，hue-rotate 的值逐步扭转，这里因为无奈上传 git 图片，只能看下动态图片：

brightness 能够扭转图片的亮度，默认值为 100%, 即 1。

 .filter {filter: brightness(2);
}

contrast 代表对比度，这个属性取值和饱和度 saturate 相似，取值也是数字。

.filter {filter: contrast(2.5);
}

这里咱们演示对比度是 250% 时候的成果，如下图：

drop-shadow 这个属性相似于 box-shadow，给图片加暗影。

.filter {filter: drop-shadow(20px 20px 10px 20px #000) /** 程度暗影地位，垂直暗影地位，含糊间隔，暗影色彩 **/
}

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