我正在创建一个简单的占位符页面来宣布一个新网站。该页面仅包含
我认为这很容易 - 我放置一个指定尺寸的定位背景图像，然后放置一个绝对定位的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% with
-
background-size:auto 25% would
产生一个图像
- 背景图像水平居中，其左上角位于容器高度的 37% 处（设置为
100vh)
- 绝对定位
h1元素距顶部 (37.5 + 25)%
为了更好地衡量我设置padding:0and margin:0在一切事情上。然而，最终结果并不完全符合预期——徽标图像的底部和顶部之间仍然有太多的空间。h1标头。显然，我在这里误解了背景定位和/或大小的某些方面。我非常感谢任何能够让我走上正轨的人
当对背景图像使用百分比时，它根本不起作用，正如人们首先想到的那样。
当您使用百分比设置背景位置时，图像的位置将使其自身的 X% 与元素的 X% 对齐。 CSS Tricks 上的这篇文章很好地展示了这一点：百分比背景位置作品 https://css-tricks.com/i-like-how-percentage-background-position-works/
使用视口高度单位vh instead
*
{
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
