如何在頁面內容後面放置背景圖片？

我的網頁上有一個背景圖片。現在我想添加浮在其上的內容。下面的代碼將內容放置在圖像後面。如何糾正？如何在頁面內容後面放置背景圖片？

請注意，我已經借了這個鏈接，背景圖片討論（我試圖讓效果）：CSS-Only Technique #2來自：http://css-tricks.com/perfect-full-page-background-image/

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    <!-- 
    #bg { 
      position: fixed; 
      top: -50%; 
      left: -50%; 
      width: 200%; 
      height: 200%; 
      } 
      #bg img { 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%; 
      min-height: 50%; 
      } 
    --> 
    </style>  
</head> 
<body> 

    <div id="bg"> 
     <img src="myimage.jpg"> 
    </div> 

    <div id="mycontent"> 
     ... 
    </div> 
</body> 
</html>

來源

2014-11-03 user46688

你爲什麼不把背景圖像放在身體上 – Huangism 2014-11-03 21:14:23

我建議把背景圖像放在身體標籤上。如果不是，請嘗試給#bg一個-1的東西，或者你甚至可以把你的#bg div放在前面，然後把內容放在第一位。 – jleggio 2014-11-03 21:15:27

div與bg類不是必需的，你可以添加背景圖像到mycontent div – 2014-11-03 21:15:46

只需設置你的z-index爲負值

#bg{ 
    z-index:-1; 
}

來源

2014-11-03 21:32:33 jleggio

這一直是我的，方便BG圖像轉到解決方案。你不需要添加圖像的HTML標記 - 只需在CSS文件中引用。這也將完美地爲您縮放圖像。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源： http://css-tricks.com/perfect-full-page-background-image

來源

2014-11-03 21:17:29

只適用於IE 9+（這就是爲什麼我在該鏈接中使用CSS-Technique Technique＃2）。但是，如果沒有其他解決方案，我願意這麼做。 – user46688 2014-11-03 21:20:44

請參閱本：

Reference 1

Reference 4

來源

2014-11-03 21:19:49 Sajidkhan

如何在頁面內容後面放置背景圖片？

回答

相關問題