为什么当我定位元素位置时，渐变背景会消失:绝对? [英] Why does the gradient background disappear when I make an element position:absolute?
问题描述
我制作了一个渐变背景，我想集中此文本块.我的目标是创建一个无论屏幕视口分辨率如何都集中在屏幕中间的标题.
因此，我将该头文件设为绝对位置，并使用了我在网上找到的这种集中化方法.它完全集中，问题是渐变背景变成白色(看起来像标题位于身体背景上方，我不知道). 我已经尝试过使用固定位置，但问题仍然存在，其他类型的位置无法集中.
* {
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中取出标头，则背景会很好. 如何使背景同时出现并集中该元素?
在正文中增加一些高度以查看背景:
* {
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，因此您什么也看不到. /p>
您没有义务给出100vh的高度.由于由于背景传播， .视觉效果并不完全相同，但是在这种情况下您几乎不会注意到这一点.
* {
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>
您可以查看此答案，以更好地了解传播是如何进行的以及如何与梯度一起工作.
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.
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>
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?
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>
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.
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>
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屋！
