CSS3 背景图像放置

Question

我正在创建一个简单的占位符页面来宣布一个新网站。 该页面不包含任何其他

内容

• 居中背景徽标图像
• 紧挨着该图像下方的"流行语">

我认为这很容易 - 我放置一个指定大小的定位背景图像，然后放置一个绝对定位的h1标题以获得背景图像正下方的"流行语"。

*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}

<h1>CSS3 is Cool!</h1>

这是为了理解

• 背景原点：边框框;
• background-position:center 37.5%
• background-size:auto 25%会

生成图像

1. 背景图像水平居中，其左上角位于其容器高度的 37%(设置为100vh)
2. 绝对定位的h1元素位于顶部的 (37.5 + 25)%

为了好好衡量，我对所有事情都设定了padding:0和margin:0。 然而，最终结果并不完全符合预期 - 徽标图像的底部和h1标题的顶部之间仍然有太多的空间。 显然，我在这里误解了背景定位和/或大小的某些方面。 我会对任何能够让我走上正轨的人非常有义务

Answer 1

当对背景图像使用百分比时，它根本不像人们最初想象的那样有效。

当您使用百分比设置背景位置时，这会定位图像，使 X% 穿过自身的方式与穿过元素的 X% 对齐。CSS Tricks的这篇文章很好地展示了它：百分比-背景-位置-工作

改用视口高度单位vh

*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}

<h1>CSS3 is Cool!</h1>