CSS3 背景图片放置

Question

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

居中的背景徽标图片
a "catch phrase" 紧接在该图像下方

我认为这很容易 - 我放置了一个指定大小的定位背景图像，然后放置一个绝对定位的 h1 header 以获得背景正下方的 "catch phrase"图片。

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

使用

生成图像

背景图片水平居中，左上角位于其容器高度的 37%（设置为 100vh）
绝对定位的 h1 元素距离顶部

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

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>

CSS3 背景图片放置

CSS3 background image placement

css

background-image

centering