为什么当我制作元素位置时线性梯度消失：绝对？

Question

我做了一个渐变背景，我想集中这块文本。我的目标是创建一个集中在屏幕中间的标题，无论视口的分辨率如何。

所以我把这个header做了一个绝对位置，使用了我在网上找到的这个中心化方法。它完美地集中，问题是渐变背景变成白色（看起来标题在身体背景之上，我不知道）。 我已经尝试过使用固定位置，但问题仍然存在，其他类型的位置不集中。

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

<header>
  <h1>Hello!</h1>
</header>

你可以在这里运行代码：https://jsfiddle.net/Jhugorn/dsknqp7x/1/ 如果你在 CSS 中去掉标题，背景看起来就好了。 如何让背景同时出现并集中这个元素？

Answer 1

为 body 添加一些高度以查看背景：

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

<header>
  <h1>Hello!</h1>
</header>

您的主体不包含流入元素，因此其高度等于0（html 高度也是如此），这将使背景大小为0，因此您什么也看不到。

您没有义务提供100vh 的高度。由于to background propagation，即使是一个小的填充也足够了。视觉效果不会完全相同，但在这种情况下您几乎不会注意到这一点。

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  padding:5px;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

<header>
  <h1>Hello!</h1>
</header>

html 上的小填充也可以：

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);

}
html {
  padding:2px;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

<header>
  <h1>Hello!</h1>
</header>

一个大的填充会让事情看起来不同！

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);

}
html {
  padding:40px;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

<header>
  <h1>Hello!</h1>
</header>

---

您可以查看this answer 以更好地了解传播是如何完成的以及它如何与梯度一起工作。