文本阴影不会在 DIV 中触发，但在 BODY 中会触发 [重复]

Question

我有一个基于这个 codepen 的简单测试：https://codepen.io/davidlillo/pen/wZRagx

@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
body {
  justify-content: center;
  align-items: center;
  min-height: 25vh;
  background-color: #141E30;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}

#backinblack h1 {
  text-transform: Uppercase;
  margin-bottom: .5em;
  font-family: 'Rubik', sans-serif;
  font-size: 6rem;
  color: #E4E5E6;
}

#backinblack h1 {
  position: relative;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#backinblack h1:before,
#backinblack h1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

#backinblack h1:before {
  z-index: -1;
  text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
}

#backinblack h1:after {
  z-index: -2;
  text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
  mix-blend-mode: multiply;
}

<div id="backinblack">
  <h1 data-text="test">test</h1>
</div>

当 CSS 像这样时，文本阴影可以正常工作：

body {
    justify-content: center;
    align-items: center;
    min-height: 25vh;
    background-color: #141E30;
    background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}

但是，如果我将其更改为具有这样的 CSS：

#backinblack {
    justify-content: center;
    align-items: center;
    min-height: 25vh;
    background-color: #141E30;
    background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}

然后像这样保留 HTML：

<div id="backinblack">
    <h1 data-text="test">test</h1>
</div>

那么文字阴影就不会出现了：

@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
#backinblack {
  justify-content: center;
  align-items: center;
  min-height: 25vh;
  background-color: #141E30;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}

#backinblack h1 {
  text-transform: Uppercase;
  margin-bottom: .5em;
  font-family: 'Rubik', sans-serif;
  font-size: 6rem;
  color: #E4E5E6;
}

#backinblack h1 {
  position: relative;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#backinblack h1:before,
#backinblack h1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

#backinblack h1:before {
  z-index: -1;
  text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
}

#backinblack h1:after {
  z-index: -2;
  text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
  mix-blend-mode: multiply;
}

<div id="backinblack">
  <h1 data-text="test">test</h1>
</div>

我想知道为什么会这样？

Answer 1

那是因为#backinblack 的背景放置在阴影上方并因此阻挡了它（如果您从#backinblack 中移除背景，您会看到阴影确实存在），所以您需要一个 z-index在你的#backisblack 上，只有当你将 div 的位置设置为绝对时才有效。

添加

  position:absolute;
  z-index:-1;
  width:100%;

到你的#backinblack 来改变它。

有关 z-index 的更多信息：https://www.w3schools.com/cssref/pr_pos_z-index.asp

@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
#backinblack {
  justify-content: center;
  align-items: center;
  min-height: 25vh;
  background-color: #141E30;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
  position:absolute;
  z-index:-1;
  width:100%;
}

#backinblack h1 {
  text-transform: Uppercase;
  margin-bottom: .5em;
  font-family: 'Rubik', sans-serif;
  font-size: 6rem;
  color: #E4E5E6;
}

#backinblack h1 {
  position: relative;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#backinblack h1:before,
#backinblack h1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

#backinblack h1:before {
  z-index: -1;
  text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
}

#backinblack h1:after {
  z-index: -2;
  text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
  mix-blend-mode: multiply;
}

<div id="backinblack">
  <h1 data-text="test">test</h1>
</div>

Answer 2

发生这种情况是因为stacking context。浏览器根据堆叠顺序像堆栈一样一个接一个地绘制元素。在你的例子中， body 将被视为stacking context，这意味着body 中的任何元素都不会落后于body。这就是为什么当您使用 body 选择器时它会起作用的原因。

在另一个示例中，您使用了#backinblack div 元素，它没有自己的stacking context。这意味着#backinblack 中的任何内容都可以在#backinblack 标记后面，如果您使用负的z-index 值。这就是文本不可见的原因。

要使其工作，您必须通过以下方式将stacking context 添加到#backinblack。

1. 添加除static 之外的任何position 并添加除auto 之外的任何z-index
2. 加opacity小于1

在下面的示例中，我只是使用第二种技术来创建stacking context 并使其工作。前任。 opacity: 0.999.

@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
#backinblack {
  justify-content: center;
  align-items: center;
  min-height: 25vh;
  background-color: #141E30;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
  opacity: 0.999;
}

#backinblack h1 {
  text-transform: uppercase;
  margin-bottom: .5em;
  font-family: 'Rubik', sans-serif;
  font-size: 6rem;
  color: #E4E5E6;
  color: red;
}

#backinblack h1 {
  position: relative;
  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#backinblack h1:before,
#backinblack h1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

#backinblack h1:before {
  z-index: -1;
  text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
}

#backinblack h1:after {
  z-index: -2;
  text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
  mix-blend-mode: multiply;
}

<div id="backinblack">
  <h1 data-text="test">test</h1>
</div>