CSS - 把一個圖像集中在另一個頂部

我必須製作一個寬度爲100％的圖像的頁面，該圖像將位於頁面頂部（我將稱之爲「img1」）。CSS - 把一個圖像集中在另一個頂部

在img1上，我必須把另一張圖像稱爲「img2」，它將在px中有一個固定的大小，並將居中。

img2將是一個窗體的背景，所以我會在窗體上放置一個窗體。

我已經閱讀了一些關於如何將圖像放置在另一個圖像上的相對和絕對嵌套div的問題，但後來我不能使用margin auto;在img2上，因爲它有絕對的位置，並且因爲它在px中有一個大小，所以我甚至不能在％中放置左邊，因爲它會根據屏幕大小而移動。

我試過另一個選項，它使用兩個帶有指定背景大小（img1的寬度爲100％，img2的寬度爲500px）的背景圖像，並將img2與背景位置對齊：它可以工作，但隨後img1的div（當然是空的，因爲我使用的是背景圖片），沒有高度。

當我使用標籤時，通過在img1上放置100％的寬度，由於圖像比率的緣故，高度被自動定義。但現在有了背景圖片，我不能告訴div「嘿，請把你的高度適合你的背景圖像」。

你有什麼建議？我希望我已經很好地解釋了我的問題。

非常感謝您

來源

2013-02-13 Rayjax

也許只是把第一圖像作爲身體的背景標記設置爲最高並且不重複？第二個圖像可以放置爲div的背景，設置爲正確的寬度和高度，以及「margin：0 auto」，以它爲中心。 – 2013-02-13 12:50:59

是的，我已經試過：工作原理相同，但重點是，如果我使用背景圖像，我將有一個div高度0.沒有辦法，我發現除了JavaScript以獲得div的高度（寬度爲100％）以適應背景圖像（其寬度也爲100％，高度取決於圖像比例）。這就是爲什麼我會去的標籤，但我不能居中IMG2 ... 也許一些CSS大師在那裏找到了答案...... – Rayjax 2013-02-13 12:59:22

如果你有第一次的圖像作爲BODY標籤的背景那麼你不必擔心它的高度。 – 2013-02-13 13:02:24

我不明白這一點：

上IMG2，因爲它有一個絕對的位置，因爲它有一個大小在PX，我甚至不能在左側放置％，因爲它會根據屏幕大小移動。

你說IMG2具有固定的大小，在我看來，它是與絕對位置和負保證金定心完美的情況。

比方說，你IMG2是200像素寬：

.img2 { 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    margin-left: -100px /* negative half the width */ 
}

如果IMG2有大小％這是行不通的。

來源

2013-02-13 12:59:10 mddw

我很愚蠢，我沒有想到負邊際。愛你。 – Rayjax 2013-02-13 13:17:05

試着讓你的基地形象absolute並應在上面去，因爲relative，在同一時間使用z-index用於再疊加圖片，如果我理解正確的問題，它應該工作

來源

2013-02-13 12:58:31

這適用於定位，我遇到的問題是當時的圖像居中。 bb – Rayjax 2013-02-13 13:25:27

你可以用CSS3 multiple background images

這允許您指定一個以上的背景下，像這樣做：

background-image: url(http://i153.photobucket.com/albums/s223/chibizim/110-baby-monkey.png), url(http://upload.wikimedia.org/wikipedia/commons/e/e6/Standing-stone-state-forest-tn1.jpg);

DEMO

來源

2013-02-13 13:00:31 Andy

我選擇了其他答案，因爲它不需要CSS3，但這看起來很實用，謝謝。 – Rayjax 2013-02-13 13:16:24

CSS - 把一個圖像集中在另一個頂部

回答

相關問題