引导4测试版转盘黑暗覆盖

我利用引导V4.0.0-β的carousel control，但我似乎无法克服图像暗透明覆盖创建图像和之间相映成趣文本。引导4测试版转盘黑暗覆盖

反正有什么想法。归类例如

我已经试过包装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>

我看到了一些解决方案，其中图像设置为幻灯片的背景，但我想保持旋转木马动态，因为我想旋转图像。因此将其设置为背景图像可能不是最佳解决方案。

这是如何可以解决任何帮助，将不胜感激。

来源

2017-10-18 Slakbal

就找到了解决办法了。

原来这是控制从文档复制：

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

希望这有助于为您的代码将是

来源

2017-10-18 21:42:59 Slakbal

解决方案集“位置”到“相对”为你“暗覆盖”的div和你为这个元素移动到选择写的所有的CSS“.dark-覆盖层：后”，添加‘显示：块’给他们，例如：

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

来源

2017-10-18 21:46:50 Joint

引导4测试版转盘黑暗覆盖

回答

相关问题