CSS3 背景图片放置

Question

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

• 一个居中的背景标志图片
• 紧接在该图片下方的“流行语”

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

*
{
 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-origin:border-box;
• background-position:center 37.5% 和
• background-size:auto 25% 会

产生图像

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

为了更好地衡量，我在所有内容上都设置了 padding:0 和 margin:0。然而，最终结果并不完全符合预期—— Logo 图像底部和 h1 header 顶部之间仍然有太多空间。显然，我在这里误解了背景定位和/或大小的某些方面。如果有人能帮助我走上正轨，我将不胜感激

Answer 1

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

当您使用百分比设置背景位置时，图像的位置会使其自身的 X% 与元素的 X% 对齐。 CSS Tricks 上的这篇文章很好地展示了它:percentage-background-position-works

改用视口(viewport)高度单位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>