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?
Hier mal mein Beispiel Code (die Klasse .prof-data soll in diesem Fall voll sichtbar sein):
<div id="profile-grid"> <div class="channel-back"></div> <div class="prof-data-img text-p3"> Bild <a href="xxx.php" class="channel-link">Bild</a> </div> <div class="prof-data text-p3"> <div class="prof-data-row">eins</div> <div class="prof-data-row">zwei</div> <div class="prof-data-row">drei</div> <div class="prof-data-row">vier</div> <div class="prof-data-row">fünf</div> </div> </div> #profile-grid display: grid grid-template-columns: 4fr 40% 0.5fr 40% 4fr grid-template-rows: 6em 6em auto gap: 0px 0px grid-auto-flow: row .channel-back grid-area: 1 / 1 / 3 / 6 background-image: url(../img/222.png) background-size: 100% border: 1px solid $main_background_4 .prof-data-img grid-area: 2 / 2 / 4 / 3 padding: 2rem background-color: $brightest_backgrund opacity: 0.9 .prof-data grid-area: 2 / 4 / 4 / 5 display: grid grid-template-columns: 1fr grid-template-rows: 1fr gap: 0px 0px padding: 2rem background-color: $brightest_backgrund opacity: 0.9
Comment