bootstrap 4 beta carousel dark overlay

Question

我正在使用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);
}

希望这可以帮助