css - 如何在 CSS 中将模糊变成模糊以“背景过滤”？

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

我尝试了 backdrop-filter:blur，div 模糊它工作但 div 内部 div 模糊不起作用。

我想给模糊的 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>

如何在 CSS 中将模糊变成模糊以“背景过滤”？

0 个答案: