如何在页面内容后面放置背景图片？

我的网页上有一个背景图片。现在我想添加浮在其上的内容。下面的代码将内容放置在图像后面。如何纠正？如何在页面内容后面放置背景图片？

请注意，我已经借了这个链接，背景图片讨论（我试图让效果）：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

如何在页面内容后面放置背景图片？

回答

相关问题