以背景大小居中div的div內容：cover property

我想將圖像置於背景圖片的上方。以背景大小居中div的div內容：cover property

#home是延伸到瀏覽器
#hometitle大小的背景圖像，我想在上面

形象，我想在我的#home背景等等的頂部中央#hometitle沒有與瀏覽器的大小有關，它將被分隔到背景圖像的中心。

我試過保證金：0汽車;然後margin-top：250px;之後，但這只是在整個250像素的背景圖像上創建一個白色的空白;

位置：絕對;而頂部/左側並沒有真正的幫助，因爲在調整瀏覽器大小時，位置將是靜態的，不會居中。

#home { 
height: 1000px; 
margin: 0 auto; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center; 
background-image: url("images/bigheader.png"); 
} 

#hometitle { 
background-image:url(images/title.png); 
height: 260px; 
width: 435px; 
}

HTML：

<div id="home"> 
    <div id="hometitle"> 
    </div> 
</div>

來源

2012-07-27 user1486934

#hometitle { 
    background-image:url(images/title.png); 
    height: 260px; 
    width: 435px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -130px; 
    margin-left: -217px; 
}

這應該這樣做，因爲我們現在的位置是在家裏標題圖像絕對在瀏覽器的渲染空間的中心。如果您有圖像的位置有些問題，加上

body {position: relative;}

這是一個最簡單的和最好的技術的一個元素的，我經常使用的中心位置

來源

2012-07-27 23:58:19

謝謝，它的工作原理！你怎麼知道包含margin-top：-130px; 和margin-left：-217px; ？ – user1486934 2012-07-28 00:00:35

另外，如果我想要某個中心，但在我的#hometitle下面呢？ – user1486934 2012-07-28 00:04:19

它取決於div的寬度和高度。你必須把它拉到頂部，一半到左邊 – 2012-07-28 00:06:08

不能使用margin-top相對於<div id="home">將<div id="hometitle">向下移動，因爲邊距摺疊，但您可以在<div id="home">上添加頂部填充。

來源

2012-07-27 23:59:47 Neil

以背景大小居中div的div內容：cover property

回答

相關問題