时间戳

首页 > 解决方案 > 如何在 CSS 中对“背景过滤器”进行模糊处理？

css - 如何在 CSS 中对“背景过滤器”进行模糊处理？

问题描述

如何backdrop-filter在 CSS 中将模糊变为模糊？

我试过backdrop-filter:blur了， div blur 它工作但 div inner div blur 不工作。

我想给模糊 div 中的 div 赋予更多的模糊性。举个例子，让主div为5px，里面的div更模糊，即10px。

简而言之，我想为红色标记的区域添加更多模糊。

在此处输入图像描述

body {
  background-image:url('https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg');
  background-position:center;
  background-color:green;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bigArea {
  backdrop-filter:blur(5px);
  padding:100px;
  text-align:center;
}

.innerArea {
  backdrop-filter:blur(20px);
  padding:10px;
  text-align:center;
}
<body>
<div class="bigArea">
  Some Text
  <div class="innerArea">
    Other Some Text
  </div>
</div>
</body>

标签： csscss-filters

解决方案

推荐阅读