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

Question

见这个例子：

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

有人可以告诉我为什么会这样吗？我想这与<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> 有关。我想防止这种情况 - 嵌套对象也应该变暗。任何解决方案？

提前致谢！

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

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;
}

CSS：

i = i%len(replace_chars)

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;
}

这是一个更新的小提琴：https://jsfiddle.net/6wwz8usw/。

答案 1 :(得分：2)

https://jsfiddle.net/fd7tx2c2/

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

Z-index

Position

Answer 2

https://jsfiddle.net/fd7tx2c2/

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

Z-index

Position