CSS中backdrop-filter与fliter属性

一、介绍mdn文档中对这两个属性的介绍

（1）backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

（2）CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

二、来理解backdrop-filter属性的例子

（

为省事，我直接修改w3school上的内容 例子来源https://www.w3school.com.cn/tiy/t.asp?f=cssref_filter_grayscale_1）

下图我使用了css的backdrop-filter属性，其中 div设置了这个属性，而且div的背景颜色是透明的，不然就无法看到模糊的元素了。z-index属性用来设置堆叠顺序（不过在这里不用也行，因为在这个例子里只有div含有position属性）。可以看到，div元素后面的区域添加了模糊效果，而div元素里面的内容“我在div里面”并不会变得模糊。

 如果div没有设置backdrop-filter  div元素背后的区域并不会变得模糊，效果如下，

三、来理解filter属性的例子

filter将元素中的内容变得模糊