Question

我希望在我的内容div中获得透明的背景图像。为了在不影响.content的子元素的情况下执行此操作，我定义了.content：after的背景图像，并希望将其位置设置为我的.content的位置。

问题是：在此代码中，背景图片从正文的top: 0, left: 0, right: 0, bottom: 0 开始。我怎样才能从我的.content开始呢？另一个问题是我实际上有一个标题，它具有灵活的高度。因此，我们不知道.content的绝对顶部位置。

.content {
  width: 200px;
  margin: 10px auto;
}
.content:after {
  content: "";
  background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
}

Answer 1

您可以使用背景值作为rgba，而不是使用:after伪类。这不会影响子元素的透明度。

.content {
    width: 200px;
    margin: 10px auto;
    background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
    background-color: rgba(255, 255, 255, 0.7);  /* added */
}

Answer 2

将.content div设置为position: relative，将.content:after设置为position: absolute。确保您应用正确的z-indexes。 .content:after的z-index应高于.content。

应如下所示：

.content {
  width: 200px;
  margin: 10px auto;
  position: relative;
  z-index: 10;
}
.content:after {
  content: "";
  background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  z-index: 20;

}

将after的background-image对齐到其父容器

2 个答案: