我的伪元素覆盖不起作用

Question

我正在尝试将图像（甚至只是简单的 rgba 颜色）覆盖在 bootstrap 背景滑块之上。我从来没有遇到过在其他网站上使用这种特殊效果的问题，所以我不确定我在这里做错了什么。这是一个 WordPress 网站，但我用过的所有其他网站也是如此。

section.top-carousel {
  height: 65em;
}

#background-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  top: -10px;
}

#background-carousel .carousel,
#background-carousel .carousel-inner {
  width: 100%;
  height: 100%;
}

#background-carousel .item {
  width: 100%;
  height: 100%;
  background-size: cover;
  height: 65em;
}

div#background-carousel:before {
  background-color: rgba(0, 0, 0, .8);
  background-size: 100% 100%;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  height: 65em;
  width: 100%;
  display: block;
}

<section class="top-carousel">
  <div id="background-carousel">
    <div id="homeCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        ...slides are in here, generated by a WP loop...
      </div>
    </div>
  </div>
</section>

我在不同的地方尝试了最后一组样式：#top-carousel:before & :after，#homeCarousel:before & after，.carousel.slide:before & after，甚至在 .carousel-inner:before & after 上。这只是我在放弃并来到这里之前尝试过的最新一次。因为我在#background-carousel 上有一个 "Relative" 的位置，所以我认为伪元素上的 "Absolute" 的位置可以解决问题。但显然不是。我一定是太累了，无法自己解决这个问题。

Answer 1

你忘记给伪元素添加内容了

div#background-carousel:before {
content:'';
}

Answer 2

没有 content 属性，它是规范中生成的 content 模块的一部分，伪元素是无用的。因此，虽然需要伪元素选择器本身来定位元素，但如果不添加内容属性，您将无法插入任何内容。使用内容它会工作正常。

jsFiddle 上的示例与您的代码：https://jsfiddle.net/hamzanisar/xa1jq7op/

我的伪元素覆盖不起作用

My pseudo element overlay isn't working

css

pseudo-element