背景图像不透明度与父背景颜色答案

【问题标题】：background image opacity with parent background color背景图像不透明度与父背景颜色
【发布时间】：2017-08-25 18:01:54
【问题描述】：

CSS: set background image with opacity? 的答案描述了使用伪元素 :after 进行的出色背景不透明度修复。但是，如果父分区具有背景颜色，则透明背景图像不再显示，因为它使用了z-index: -1。我使用这个基本模型尝试了许多变通方法，但都无济于事。

这里是示例代码。请注意，如果没有 .locations_30 {background:white}，它会很好用。

body {
  background-color: #fefbed;
  color: #444;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.locations_20 {
  position: relative;
}

.locations_20:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  background-image: url(../background_images/zenrockgarden_mod.jpg);
  background-repeat: no-repeat;
  left: 0%;
  top: 0%;
  background-size: 100% 100%;
  opacity: 0.27;
}

.locations_30 {
  background: white;
  width: 800px;
  padding: 75px;
} /*parent division with color will overrun z-index: -1*/

<body>
  <div class="locations_40">
    <div class="locations_30">
      <p class="locations_20">
        Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
        etc,,, <br> We are happy to offer the following: etc,,, <br>
      </p>
    </div>
  </div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

如果您像这样更新.locations_20 规则，它将起作用

.locations_20 {
  position: relative;
  z-index: 0;                    /*  added  */
}

堆栈sn-p

请注意，由于 SO 此处未加载图像，我将 red 添加到 .location_20 的背景中，以便人们可以看到它的工作原理

body {
  background-color: #fefbed;
  color: #444;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.locations_20 {
  position: relative;
  z-index: 0;                    /*  added  */
}

.locations_20:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  background-image: url(../background_images/zenrockgarden_mod.jpg);
  background-repeat: no-repeat;
  left: 0%;
  top: 0%;
  background-size: 100% 100%;
  opacity: 0.27;
  background-color: red;         /*  temp. added so we can see it  */
}

.locations_30 {
  background: white;
  width: 800px;
  padding: 75px;
}

<body>
  <div class="locations_40">
    <div class="locations_30">
      <p class="locations_20">
        Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
        etc,,, <br> We are happy to offer the following: etc,,, <br>
      </p>
    </div>
  </div>
</body>

【讨论】：