Question

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

因此，我将该头文件设为绝对位置，并使用了我在网上找到的这种集中化方法。它完美地集中了，问题是，渐变背景变成了白色（看起来像标题位于身体背景上方，我不知道）。我已经尝试过使用固定位置，但问题仍然存在，其他类型的位置没有集中。

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

为身体增加一些高度以查看背景：

* {
  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以便更好地了解传播是如何完成的以及它如何与渐变一起工作。

为什么添加绝对位置元素时背景会变成白色？

1 个答案: