Question

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

居中的背景徽标图片
a＆＃34;口号＆＃34;紧接着那张图片

我认为这很容易 - 我放置一个指定尺寸的定位背景图像，然后放置一个绝对定位的h1标题来获取＆＃34;捕捉短语＆＃34;在背景图像正下方。

＆＃13;

*
{
 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;
}

＆＃13;

<h1>CSS3 is Cool!</h1>

＆＃13;

这是为了理解

背景来源：边界框;
background-position:center 37.5%
background-size:auto 25%

使用

生成图像

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

为了更好地衡量，我在所有内容上设置了padding:0和margin:0。但是，最终结果并不像预期的那样 - 徽标图像的底部和h1标题的顶部之间仍然存在太多空间。很明显，我在这里误解了背景定位和/或尺寸的某些方面。对于任何能够让我走上正轨的人来说，我都有很大的责任感

Answer 1

当使用百分比作为背景图片时，首先想到它根本不起作用。

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

使用视口高度单位vh代替

＆＃13;

*
{
 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;
}

＆＃13;

<h1>CSS3 is Cool!</h1>

＆＃13;

CSS3背景图片放置

1 个答案: