ブートストラップ4ベータ・カルーセル・ダーク・オーバーレイ

Question

私はブートストラップ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とこの要素のために書いたすべてのCSSの '相対位置'を 'relative'に設定してください。セレクタ '.dark-overlayer：after'に移動し、 'display：block'を追加します。

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