Question

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>

Answer 1

如果您像这样更新.locations_20规则，则可以使用

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

Stack snippet

请注意，由于图片未在此处加载，因此我将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>

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

1 个答案: