html - 背景色调叠加问题

Question

在尝试创建有色叠加层时，我遇到了在背景图像上叠加 0.5 不透明度 div 的问题。

问题是具有 background-color 属性的 div 不在背景图像的前面。请在下面查看我的代码笔和代码:

http://codepen.io/mattsmith/pen/evzBJW

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>

谁能解释为什么会这样？谢谢。

Answer 1

您可以在 .background-image 上设置负的 z-index(例如 z-index: -1)。但我个人会以不同的方式构建它，也就是说，我会在 .container 上设置背景图像，然后 .background-image 变成 .overlay (这样你就不需要负 z-index 了)。