带有框阴影的奇怪 CSS 效果 - 如何解决？

Question

看这个例子：

我有几个白色背景的盒子，巨大的黑色半透明盒子阴影与上面的盒子重叠。然而，这会导致令人恼火的行为：虽然白色背景通过重叠的框阴影变得更暗，但 嵌套对象（如文本或其他框）不会变暗！

谁能告诉我为什么会这样？我猜这与z-index有关。我想防止这种情况 - 嵌套对象也应该变得更暗。有什么解决办法吗？

提前致谢！

---

代码如下：https://jsfiddle.net/xq20hvp4/3/

<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>

CSS:

div {
    margin: 20px;
    box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
    font-size: 25px;
    color: red;
    font-weight: bold;
    font-family: Consolas, Arial, sans-serif;
    background-color: #ffffff;
}
div span {
    background-color: #e7e7e7;
    color: #555555;
    font-weight: normal;
    font-size: 17px;
    padding: 1px 5px;
}

Answer 1

这是因为那些元素 在 之上 div 带有阴影。为了把它们放在后面，你可以在背景元素上使用 position: relative; 并给它 z-index: 1:

div {
  margin: 20px;
  box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
  font-size: 25px;
  color: red;
  font-weight: bold;
  font-family: Consolas, Arial, sans-serif;
  background-color: #ffffff;

  /* Add this */
  position: relative;
  z-index: 1;
}

div .box {
  background-color: #e7e7e7;
  color: #555555;
  font-weight: normal;
  font-size: 17px;
  padding: 1px 5px;
}

这是更新后的 fiddle：https://jsfiddle.net/6wwz8usw/。

Answer 2

https://jsfiddle.net/fd7tx2c2/

div {
 z-index: 1;
 position: relative;
}

Z-index

Position