Html 具有背景色属性的div下方的背景图像

我试图用

背景色

属性在两个

div

s下面显示背景图像。 我试着玩

z-index

和

position:relative

，但到目前为止没有成功。 图像在这两个

div

s下方不可见

CSS:

HTML:

• 在您的内部div中添加一个负数

  z-index

  ：
• 从父DIV中删除

  z索引

（）

这将使内部div位于其父div的下方。如果你有兴趣了解它是如何工作的。基本上，您必须避免在要放置在上面的父元素上创建本地堆叠上下文（

z-index

和一些其他属性创建堆叠上下文）。

尝试使用

rgba（#，#，#，0.5）

指定颜色，其中#是一个从0到255的数字，用于指定颜色。结尾0.5表示不透明度为50%

.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;
}

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