文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在页面内容后面放置背景图片？

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

Stack Overflow用户

提问于 2014-11-04 05:12:20

回答 3查看 28.5K关注 0票数 0

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

请注意，我借用了这个链接中讨论的背景图像：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>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-11-04 05:32:33

只需将z-index设置为负值

#bg{
    z-index:-1;
}

票数 6

Stack Overflow用户

发布于 2014-11-04 05:17:30

这是我对简单的BG图像的goto解决方案。您不需要将图像添加到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

票数 1

Stack Overflow用户

发布于 2014-11-04 05:19:50

请参考以下内容：

Reference 1

Reference 4

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26723291

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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