CSS3背景图片放置 [英] CSS3 background image placement

问题描述

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

• 居中的背景徽标图像
• 该图像正下方的捕捉短语"

我认为这很容易-我将指定大小的定位背景图片放置在一个位置上，然后放置一个绝对定位的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-origin:border-box;
• background-position:center 37.5%与
• background-size:auto 25%会

通过

产生图像

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

为了很好，我在所有内容上都设置了padding:0和margin:0.但是，最终结果并不像预期的那样-徽标图像底部和h1标头顶部之间仍然有太多空间.显然，我在这里误解了背景定位和/或大小的某些方面.对于那些可能能够使我走上正确道路的人，我深感荣幸

解决方案

在背景图像中使用百分比时，乍一看根本不起作用.

当您使用百分比设置背景位置时，图像的位置应使其跨自身的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> 

I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than

• a centered background logo image
• a "catch phrase" immediately below that image

I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.

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

This is working to the understanding that

• background-origin:border-box;
• background-position:center 37.5% with
• background-size:auto 25% would

yield an image with

1. The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
2. The absolutely positioned h1element is at (37.5 + 25)% from the top

For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track

解决方案

When using percent for background images, it doesn't work at all as one first think.

When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works

Use viewport height units 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>

这篇关于CSS3背景图片放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！