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。然而，最終結果並不如預期的那樣 - 徽標圖像底部和h1標題頂部之間仍有太多空間。顯然，我在這裏誤解了背景定位和/或大小的某些方面。我非常感謝所有能夠讓我走上正軌的人

Answer 1

當使用百分比作爲背景圖像時，首先想到的是它不起作用。

當您使用百分比設置背景位置時，該圖像定位圖像，使得其自身的X％與通過該元素的方向的X％對齊。本文在CSS技巧說明它非常好：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>