絕對定位的圖片覆蓋文字

-2

我有一張圖片，我已經絕對使用作爲背景。但它覆蓋了頁面的內容。絕對定位的圖片覆蓋文字

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
    #pic1 
    { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    } 

</style> 
</head> 

<body> 
    <h1> hi there </h1> 
    <h1> hi there </h1> 
    <h1> hi there </h1>  
    <img id="pic1" src="1.jpg" width="100%" alt="picture"> 
</body> 
</html>

來源

2014-06-24 upthere

你真的想讓它成爲背景圖片嗎？如果是這樣，有很多更好的方法來做到這一點......如果你確實希望它能夠使用絕對定位的圖像，你可以將z-index設置爲-1。 – brbcoding

你應該改變圖像

的z索引屬性指定的元素的堆疊順序的z索引CSS屬性。

具有更大的堆疊順序的元素總是與堆疊順序較低的元素的前面

怎麼過，你可以用你的身體元素的另一個屬性來設置背景：背景圖像：網址（「圖像URL'）;

來源

2014-06-24 21:59:51

爲什麼不使用背景圖像放置？通過這種方式，您可以減少標記並更好地控制您希望顯示背景的方式。如果您仍然希望以這種方式放置背景，請嘗試z-index: -1並查看是否有效。

總體而言，您創建此頁面的方式並不盡如人意。您正在使用屬性設置圖像寬度。爲什麼不完全擺脫img標籤，並使用CSS滾動圖片放置。網上有很多內容展示瞭如何去做。

來源

2014-06-24 22:00:25 DRD

絕對定位的圖片覆蓋文字

回答

相關問題