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。但是，最终结果并不像预期的那样 - 徽标图像的底部和h1header 的顶部之间仍然存在太多空间。显然，我在这里误解了背景定位和/或大小的某些方面。我非常感谢任何可能让我走上正轨的人

Answer 1

当使用百分比作为背景图片时，它根本不像最初想象的那样工作。

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

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