为什么当我制作元素位置时线性梯度消失:绝对? [英] Why does the linear-gradient disappear when I make an element position:absolute?

问题描述

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

I made a gradient background and I want to centralize this block of text. My objetive is to create a header that centralizes in the middle of the screen no matter the resolution of the viewport.

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

So I made this header an absolute position and used this centralization method I found online. It centralized perfectly, the problem is, the gradient background turns white (looks like the header is above the background on the body, I don't know). I've already tried using position fixed, but the problem persists, other types of position don't centralize.

* {
  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 中去掉标题，背景看起来就好了.如何让背景同时出现并集中这个元素?

You can run the code here: https://jsfiddle.net/Jhugorn/dsknqp7x/1/ If you take out the header in the CSS, the background appears just fine. How can I make the background appear and centralize this element at the same time?

推荐答案

给body加一些高度来看看背景:

Add some height to the body to see the background:

* {
  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 因此你什么也看不到.

Your body contain no in-flow element so its height is equal to 0 (same thing for the html height) and this will make the background with a size of 0 thus you will see nothing.

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

You are not obliged to give a height of 100vh. Even a small padding can be enough due to background propagation. The visual won't be exactly the same but you will hardly notice this in this case.

* {
  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 上的小填充也可以:

A small padding on the html too is fine:

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

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

A big padding will make things look different!

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

您可以查看此答案，以更好地了解传播是如何完成的以及它如何与渐变一起工作.

You can check this answer to better understand how the propagation is done and how it works with gradient.

这篇关于为什么当我制作元素位置时线性梯度消失:绝对?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！