bootstrap 4 beta karussell dark overlay

Question

Ich benutze die carousel control von bootstrap v4.0.0-beta, aber ich kann nicht scheinen, eine dunkle transparente Überlagerung über die Bilder zu bekommen, um einen schönen Kontrast zwischen dem Bild a und der Text.

Wie auch immer, irgendwelche Ideen.

Ich habe versucht, Wrapper div zum Beispiel klassifiziert:

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

Und dann mit der oben erwähnten Klasse wickeln Sie die Image-Tags mit:

<div class="dark-overlay"> 
    <img class="first-slide" src="#" alt="First slide"> 
</div> 

sah ich einige Lösungen, bei denen das Bild Als Hintergrund auf der Folie, aber ich möchte das Karussell dynamisch halten, wie ich Bilder austauschen möchte. Daher ist es vielleicht nicht die beste Lösung, es als Hintergrundbild zu setzen.

Jede Hilfe, wie dies gelöst werden kann, wäre willkommen.

Answer 1

Habe gerade eine Lösung gefunden.

Dies ist die ursprüngliche Kontrolle der Dokumentation kopiert:

<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> 

einfach den folgenden Code zu Ihrem Stylesheet hinzufügen:

.carousel-item:after { 
    content:""; 
    display:block; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:rgba(0,0,0,0.7); 
} 

Hope this für Ihren Code

Answer 2

Lösung hilft, wird Setze 'position' auf 'relativ' für dein 'dark-overlay' div und alle css, die du für dieses Element geschrieben hast, gehe zum Selektor '.dark-overlayer: after' und füge 'display: block' hinzu, Beispiel:

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