bootstrap 4 beta 轮播深色叠加答案

【问题标题】：bootstrap 4 beta carousel dark overlaybootstrap 4 beta 轮播深色叠加
【发布时间】：2017-10-18 21:30:43
【问题描述】：

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

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

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

【问题讨论】：

标签： html css bootstrap-4

【解决方案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);
}

希望对你有帮助

【讨论】：

你就是那个男人！您是如何提出这些属性的：内容、显示、位置、顶部、底部、左侧和右侧？除了在 :after 中设置背景之外，我从没想过会尝试其他任何事情。
你也可以为你的背景使用渐变，只在底部有一些暗色。
绝对完美！

【解决方案2】：

您的代码的解决方案是将您的“dark-overlay”div 的“position”设置为“relative”，并且您为此元素编写的所有 css 移动到选择器“.dark-overlayer:after”并添加“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;
}

【讨论】：