文章/答案/技术大牛

发布

社区首页 >问答首页 >在网页背景上放置div

问在网页背景上放置div
EN

Stack Overflow用户

提问于 2014-11-26 14:40:55

回答 2查看 47关注 0票数 1

我需要放置一个背景图像(#前台)在网站的全球背景(@包装)之上。问题是包装器的背景显示在前台的顶部，尽管包装器的z索引和前景较低。

HTML：

<body>
    <div id="wrapper">
        //website content here
    </div>
    <div id="foreground"></div>
</body>

CSS

#wrapper { 
    width:100%;
    background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center; 
    min-height:1650px; 
    overflow:hidden;
    z-index: -2;
}

#foreground {
    background: url(../img/foreground.png) repeat 90% 110%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
}

致以敬意，

html

css

background

z-index

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-11-26 14:46:56

Z-索引在没有指定位置的情况下无法工作。

尝试：

#wrapper { 
    width:100%;
    background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center; 
    min-height:1650px; 
    overflow:hidden;
    z-index: -2;
    position: relative;
}

票数 2

Stack Overflow用户

发布于 2014-11-26 14:46:58

将z-索引更改为正值：

#wrapper { 
    z-index: 1;
}

#foreground {
    z-index: 2;
}

为我工作：http://jsfiddle.net/jaakkokarhu/4y37zkpu/

票数 1

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

原文链接：

https://stackoverflow.com/questions/27151903

复制

相似问题

问在网页背景上放置div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在网页背景上放置divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在网页背景上放置div
EN