Question

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

请注意，我已经借用了（并且我试图获得效果）此链接中讨论的背景图片：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>

Answer 1

只需将z-index设为负值

即可

#bg{
    z-index:-1;
}

Answer 2

这是我的轻松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

Answer 3

请参阅：

Reference 1

Reference 4

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

3 个答案: