html - bootstrap 4 beta 旋转木马深色覆盖

Question

我正在使用 carousel control bootstrap v4.0.0-beta，但我似乎无法在图像上获得深色透明覆盖层以在图像 a 和文本之间形成良好的对比。

总之有什么想法。

我试过包装 div 类，例如:

.dark-overlay{
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  top:0;
  left:0;
  width:100%;
  min-height: 250px;
}

然后用上面提到的类包装图像标签:

<div class="dark-overlay">
  <img class="first-slide" src="#" alt="First slide">
</div>

我看到一些将图像设置为幻灯片背景的解决方案，但我想保持轮播动态，因为我想换出图像。因此，将其设置为背景图片可能不是最佳解决方案。

任何有关如何解决此问题的帮助将不胜感激。

Answer 1

现在刚刚找到解决方案。

这是从文档中复制的原始控件:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

只需将以下内容添加到您的样式表中:

.carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.7);
}

希望对你有帮助