React 模块 css 背景过滤器不起作用为什么？

Question

我在这里做错了什么？为什么 css 没有应用于 div 并使其模糊有人可以帮助使我的导航栏模糊吗？

我想让我的导航栏变得模糊

Answer 1

很可能是因为您要向容器而不是其前面的元素添加模糊。查看此codesandbox，其中

h1

应用了模糊效果：https://codesandbox.io/s/purple-microservice-gcvbm1?file=/src/App.js:87-96

当您从

container

中删除

div

类时，您会发现模糊不可见。

更清楚地说：背景过滤器应用于其所应用的元素后面的所有内容。

Answer 2

应该模糊的元素（我的意思是前景中的元素在其下方的元素上投射模糊）不应该具有完全不透明的背景。

任何登陆这里的人，请尝试以下操作：

.container {
  background: rgba(10, 10, 10, .5)
  /* rest of the css properties */
}

这是一个演示：

/* CSS */

.main {
  width: 400px;
  height: 200px;
  position: relative;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 100px;
  background-color: rgba(20, 40, 200, .5);
  backdrop-filter: blur(8px);
}

.other {
  background-color: #ffeedd;
  width: 400px;
  height: 300px;
  overflow: auto;
}

<!-- HTML -->

<div class="main">
<div class="container"></div>
<div class="other">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis lacus ex, sit amet molestie arcu convallis varius. Sed augue purus, aliquet eget accumsan quis, hendrerit vel massa. Donec vel dui dolor. Ut consectetur suscipit mauris, sed hendrerit mi rhoncus sit amet. Nulla semper tristique eros, ut aliquam ligula varius id. Pellentesque bibendum, nulla sit amet malesuada volutpat, nulla dolor luctus enim, vitae condimentum libero magna nec est. Nulla finibus nisl justo, sit amet hendrerit augue convallis in. Duis eu tempus risus.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis lacus ex, sit amet molestie arcu convallis varius. Sed augue purus, aliquet eget accumsan quis, hendrerit vel massa. Donec vel dui dolor. Ut consectetur suscipit mauris, sed hendrerit mi rhoncus sit amet. Nulla semper tristique eros, ut aliquam ligula varius id. Pellentesque bibendum, nulla sit amet malesuada volutpat, nulla dolor luctus enim, vitae condimentum libero magna nec est. Nulla finibus nisl justo, sit amet hendrerit augue convallis in. Duis eu tempus risus.
</div>
</div>