Question

我正在尝试在具有div属性的两个background-color下面显示背景图片。我试过玩z-index和position: relative，但到目前为止还没有成功。图片在这两个div下面不可见。

CSS：

.bgImage {
background-image: url('../images/footer_bg.png');
background-repeat: no-repeat;
background-position: top center;
z-index: 999;
position: relative;
}

footer .bgColor1 {
background-color: #3E3E3E;
min-height: 223px;
overflow: hidden;
z-index: 0;
position: relative;
}
footer .bgColor2 {
background-color: #819808;
min-height: 223px;
overflow: hidden;
z-index: 0;
position: relative;
}

HTML：

<footer class="bgImage">
  <div class="bgColor1"></div>
  <div class="bgColor2"></div>
</footer>

Answer 1

向内部DIV添加否定z-index：
从父DIV中删除z-index

（example）

这会将内部DIV放在其父级下方。如果您有兴趣了解其工作原理read this page on MDN。基本上，您必须避免在要放在上面的父元素上创建本地堆叠上下文（z-index，而其他一些属性会创建堆叠上下文）。

Answer 2

尝试使用rgba(#,#,#,0.5);指定颜色，其中＃是0到255之间的数字以指定颜色。结尾0.5表示不透明度为50％。

在div下的背景图象与背景颜色物产

2 个答案: