CSS - 模糊 div 内的模糊 div 问题答案

【问题标题】：CSS - Problem of blured div inside a blured divCSS - 模糊 div 内的模糊 div 问题
【发布时间】：2021-01-02 16:16:34
【问题描述】：

问题是我不能在另一个模糊元素中使用一个模糊元素。我有一个模糊的标题backdrop-filter: blur(3px);，它有一个背景更模糊的divbackdrop-filter: blur(50px);，但它现在可以工作了。两者都被 3px 模糊。我需要保存结构并应用效果，请告诉我如何做到这一点？

https://jsfiddle.net/q1aymg02/42/

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

<style>
 body {
    background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
   }

.header {
  backdrop-filter: blur(3px);
  padding: 15px;
  border: 1px solid #FFF;
}

.header ul a li {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
  backdrop-filter: blur(50px);
}
</style>

<div class="header">
  <ul>
    <a href=""><li>Dont Blured</li></a>
    <a href=""><li>By 50px</li></a>
    <a href=""><li>Only 3px</li></a>
  </ul>
</div>
</body>
</html>

【问题讨论】：

这个问题看起来很相似，看看stackoverflow.com/questions/36802257/css-div-inside-div-blur
@Firanek 看起来不相似：c 模糊 div 内没有模糊 div，我还有另一个问题..
这个问题最近有一个使用伪元素的答案，这可能有助于 [link]stackoverflow.com/questions/60997948/…

标签： javascript html css

【解决方案1】：

CSS 中的背景过滤器属性用于应用滤镜效果，并且此行为由其所有子代继承。您可能对这种方法感兴趣。

 body {
    background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
   }

.header {
  
  backdrop-filter: blur(3px);
  padding: 15px;
  border: 1px solid #FFF;
}

.header ul a li {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
  backdrop-filter: blur(50px);
}

.header ul a li::before {
   content: "";
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(50px);
}

.header ul a li.blured::before {
  content: "Dont Blured";
}

.header ul a li.by--50px::before {
  content: "By 50px";
}

.header ul a li.only--3px::before {
  content: "Only 3px";
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div class="header">
  <ul>
    <a href=""><li class="blured">Dont Blured</li></a>
    <a href=""><li class="by--50px">By 50px</li></a>
    <a href=""><li class="only--3px">Only 3px</li></a>
  </ul>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我不确定这是否是您正在寻找的结果，但使用可以使用这种方法来模糊 li 元素

.header ul a li {
  filter: blur(1px);
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
}

它将模糊所有内容，包括文本。

【讨论】：