Question

我试图在引导程序背景滑块上放置一个图像（甚至只是一个简单的rgba颜色）。我从来没有遇到过在其他网站上使用此特效的问题，因此我不确定我在这里做错了什么。它是一个WordPress网站，但我所做的其他所有网站都是如此。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我在不同的地方尝试过最后一套造型：＃top-carousel：before＆amp; ：之后，对于#homeCarousel：之前和之后之后，.carousel.slide：之前＆amp;之后，甚至是.carousel-inner：之前和之后后。这是我尝试过之前尝试过的最新版本，并且来到这里。因为我有一个＆＃34;亲戚的位置。在＃background-carousel上，我会认为＆＃34; Absolute＆＃34;关于伪元素会处理事情。但显然它不是。我必须过度疲惫，不能自己解决这个问题。

Answer 1

您忘记向psuedo元素添加内容

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

Answer 2

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

关于js的示例使用您的代码：https://jsfiddle.net/hamzanisar/xa1jq7op/

我的伪元素叠加层不起作用

2 个答案: