Question

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

问题是div属性background-color不在背景图片前面。请参阅下面的codepen和代码：

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

您可以在z-index上设置否定.background-image（例如z-index: -1）。但我个人会以不同的方式构建它，也就是说，我会在.container上设置背景图像，然后.background-image变为.overlay（那么你就不需要负z-index）。

背景色调叠加问题

1 个答案: