Html 背景色调覆盖问题

我在尝试创建着色覆盖时遇到了一个问题，背景图像上有一个.5不透明度div的覆盖

问题是带有

背景色

属性的

div

不在背景图像前面。请参阅下面我的代码笔和代码：

CSS

* {
  font-family: Open Sans;
}

.component {
  position: relative;
  min-width: 126px;
  width: 100%;
  height: 600px;
}

.container {
  position: absolute;
  background-color: rgba(66, 66, 66, 0.5);
  width: 100%;
  height: 100%;
}

.background-image {
  background-image: url('http://i.imgur.com/tk82k0V.png');
  background-position: center;
  background-size: cover;
  position: absolute;

  height: 100%;
  width: 100%;
}

HTML

<div class="component">
  <div class="container">
    <div class="background-image"></div>
  </div>
</div>

---

有人能解释为什么会这样吗？谢谢。

您可以在

背景图像上设置负片
z-index
（例如
z-index:-1
）。但就我个人而言，我会用不同的结构，也就是说，我会将背景图像设置为
.container
，然后
。背景图像
变成
.overlay
（这样你就不需要负z索引）。
我正要编辑我的帖子。我自己也会这样做，但我添加此代码的平台要求这样做。我将用负数再次尝试z指数，就像我用
1
和
999
测试时一样，我没有运气。谢谢你的输入：）这是有效的-我将不得不研究为什么负片可以工作，而1对999没有。谢谢大家!@没问题。是的，
z-index
可能是一种复杂的生物。。。我只是这样想：正值是让元素更靠近你，负值是“把它推到”屏幕上“更远”。