当身体模糊时，我如何在身体上显示元素？

Question

我有一个问题，我试图在模糊的身体上显示div，但我无法让它真正起作用。我已经尝试将z-index添加到div中，但它似乎没有起作用。

这是我尝试过的事情：

＆＃13;

＆＃13;

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

#foo {
  z-index: 10;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您始终需要为position ed选择器

定义z-index

Answer 2

由于您已经模糊了父母，所有后代也会模糊。要达到类似的效果，你必须：

• 创建并模糊div，比如说#bar，这将成为#foo的兄弟姐妹。
• 将#foo提高z-index而不是#bar并确保其定位（不是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>

Answer 3

随机文本就像身体背景一样黑，你应该将身体z-index定义为低于#foo。 希望这有助于：）