Question

我正在使用bootstrap v4.0.0-beta的carousel control，但我似乎无法在图像上获得深色透明覆盖，以在图像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);
}

希望这有帮助

Answer 2

你的代码的解决方案是为你的'dark-overlay'div设置'position'为'relative'，你为这个元素编写的所有css都移动到选择器'.dark-overlayer：'并添加'display：阻止他们，例如：

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

bootstrap 4 beta carousel dark overlay

2 个答案: