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

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!