css3 z-index問題，不工作？

我正在一個uni項目上工作，需要我自己的圖像來形成幾頁的背景。我有一個鑰匙標誌，一個下一個和一個後退按鈕，然後是圖像。我希望形象能夠落後於所有這些元素。我已經爲每個元素分配了相對/絕對位置和z-索引。然而，圖像仍然被推到這些其他元素之下。有什麼建議？我會找到我的相關CSS/HTML並將其放在下面。css3 z-index問題，不工作？

HTML：

<body> 
<div id="logo"> 
<img src="images/key.jpg" width="3%" height="3%"/> 
</div> 

<div class="next"> 
<a href="scene2.html"> Next</a> 
</div> 

<div class="back"> 
<a href="abduction.html"> Back</a> 
</div> 

<div class="backing"> 
<img src="images/scene1.jpg" width="800" height="800"/> 
</div> 

</body> 
</html>

和CSS：

#logo { 
    position:relative; 
    z-index:200; 
} 

.backing { 
    position:absolute; 
    z-index:0; 
    float:left; 
} 

.next .back { 
    position:relative; 
    z-index:180; 
}

來源

2012-01-07 Matt Murphy

你的背部元件實際上是背後的其他元素，它只是它是它下面。如果您將背襯元素首先放置在HTML文檔中，則它位於頁面的其餘部分下方。

enter image description here

一個替代辦法是設置body標籤，而不是設置z折射率爲您的所有元素的background-image屬性。

你有沒有理由不這樣做？

要設置body標籤從HTML背景（建議，如果你有不同的背景多頁）

<body style="background-image: url('background1.png')">

如果使用AJAX，那麼你可以設置使用

背景圖像更改頁面

document.body.style.backgroundImage = "background1.png";

來源

2012-01-07 15:33:06

我已經還沒有的唯一原因是因爲我在CSS想如果我要改變body標籤的背景圖像，這將意味着該特定圖像選擇n將成爲所有頁面的背景。這不是我想要的。我希望能夠控制不同頁面的不同背景。你能推薦如何做到最好？謝謝！ – 2012-01-07 15:35:21

如果您的網站爲每個頁面重新加載，那麼您可以在每個頁面的style屬性中設置背景圖像。如果它沒有爲每個頁面重新加載，那麼你可以使用javascript來設置背景圖片： '' 和'document.body .style.backgroundImage =「background1.png」;' – 2012-01-07 15:37:19

好的，非常感謝。 – 2012-01-07 15:52:07

css3 z-index問題，不工作？

回答

相關問題