Ich habe eine img mit einem schwarzen Overlay. Das Overlay hat einen opacity und einen weißen Text innerhalb. Wenn ich den Wrapper überlege, ist ein roter Overlay mit einem anderen opacity und Text sichtbar. Es funktioniert alles gut. Mein einziges Problem ist, den opacity auf dem Text innerhalb der Überlagerungen zu entfernen. Der Text ist weiß, aber auch transparent. Wie kann ich es schaffen, den Text innerhalb eines transparenten Containers ohne transparente Auswirkung auf die Buchstaben/Texte zu setzen? Ich weiß, wenn ich den Text aus dieser Box und style es in der Mitte ID würde funktionieren. Aber ich hätte gerne das Textelement im transparenten Container. Hoffe, das ist klar genug. Irgendwelche Ideen?Text ohne Deckkraft in einem Container mit Deckkraft
.wrapper {
position: relative;
width: 300px;
height: 200px;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
cursor: pointer;
}
.overlay-black {
background: black;
opacity: 0.4;
}
.overlay-red {
background: red;
opacity: 0.8;
display: none;
}
.wrapper:hover .overlay-black {
display: none;
}
.wrapper:hover .overlay-red {
display: flex;
}
h2,
p {
color: white;
}
img {
width: 100%;
height: 100%;
}<div class="wrapper">
<div class="overlay overlay-black">
<h2>Yoda</h2>
</div>
<div class="overlay overlay-red">
<p>May the force be with you!</p>
</div>
<img src="http://digitalspyuk.cdnds.net/16/38/768x403/gallery-1474472774-yoda-008.jpg" alt="testpic">
</div>
Sie eine rgba Farbe für den Hintergrund verwenden könnte, damit Sie nicht Opazität einstellen müssen: zB 'Hintergrund: rgba (0,0,0,0.4)' wäre ein schwarz sein schwarzer Hintergrund mit 0,4 Opazität - mehr Infos: https://css-tricks.com/rgba-browser-support/ – Pete
@Pete perfekt, funktioniert gut - danke! :) – MrBuggy
Gern geschehen, froh, dass ich helfen konnte :) – Pete