html - 当 body 模糊时，如何在 body 上显示元素？

Question

我有一个问题，我试图在模糊的 body 上显示 div，但我真的无法让它工作。我试过将 z-index 添加到 div，但它似乎不起作用。

这是我尝试过的:

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: black;
    color: white;
    border: none;
    cursor: default;
    filter: blur(11px);
}

#foo {
  z-index: 10;
}

<div id="foo">
  Random Text
</div>

Answer 1

由于您已经对父对象进行了模糊处理，因此所有后代对象也将进行模糊处理。要达到类似的效果，您必须:

• 创建并模糊一个 div，比如 #bar，它将成为 #foo 的兄弟。
• 给 #foo 一个比 #bar 更高的 z-index 并确保它的位置 (不是 position: static )。

示例:

/* ----- CSS ----- */
body {
  padding: 0;
  margin: 0;
}

#bar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background: black;
  color: white;
  border: none;
  cursor: default;
  filter: blur(11px);
  z-index: 0;
}


#foo {
  color: red;
  position: relative;
  z-index: 10;
}

<!----- HTML ----->
<div id="bar"></div>
<div id="foo">
  Random Text
</div>