为什么当我创建一个元素 position:absolute 时 linear-gradient 消失了？

Question

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

所以我把这个header做成了绝对位置，用了网上找的这种中心化方式。它完美地集中，问题是，渐变背景变成白色（看起来 header 在 body 的背景之上，我不知道）。我已经试过使用position fixed，但问题依旧，其他类型的position不集中

* {
  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中的header去掉，背景就显得很好了。怎样才能让背景出现的同时让这个元素居中？

Answer 1

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

* {
  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>

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

为什么当我创建一个元素 position:absolute 时 linear-gradient 消失了？

Why does the linear-gradient disappear when I make an element position:absolute?

css

background

linear-gradients