Div opacity übereinander
Hallo zusammen,
ich kriege ein Problem einfach nicht gelöst und zwar möchte ich zwei div-Boxen übereinander legen. Dabei hat die untere einen Background und die obere den Inhalt bzw. Text.
Die untere Box soll leicht durchsichtig sein, also ein opacity von 0.8 oder 0.9. Wenn ich dies so einstelle, wird auch die darüberliegende Box durchsichtig.
Wie kriege ich so etwas gelöst?
Das ganze befindet sich in einem Grid. Ich habe schon in diesem Grid ein Grid mit diesen zwei Boxen erzeugt und diese übereinander gelegt, funktioniert leider nicht. Dann habe ich die zwei divs mit Position absolut in ein
relatives div gelegt, funktioniert auch nicht bzw. zerlegt mein Grid-System.
Gibt es eine einfache Möglichkeit einer Div-Box die innerhalb einer Opacity-Box liegt wieder volle Sichtbarkeit zu geben?
Der hier verwendete Code
<style>
#profile-grid {
width: 90vw;
height: 90vh;
text-align: center;
position: absolute;
top: 5vh;
display: flex;
left: 5vw;
z-index: 0;
font-size: 70px;
border: 2px solid black;
background: rgba(255,255,5,0.8);
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.opa {
width: 80%;
height: 80%;
position: absolute;
display: flex;
z-index: 4;
color: rgba(0,0,255,0.58);
font-size: 60px;
top: 5%;
left: 5%;
border: 2px solid black;
background: rgba(255,5,5,0.8);
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.opabox{
width: 60%;
height: 60%;
position: absolute;
display: flex;
z-index: 4;
color: rgba(220,220,222,1);
font-size: 60px;
top: 20%;
left: 20%;
border: 2px solid black;
background: rgba(5,5,255,1);
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
</style>
<div id="profile-grid">
<div class="opa">
<div class="opabox">
IN DER OPACITY BOX
</div>
OPACITY BOX
</div>
Hintergrund
</div>