Tweet
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?
Hier mal mein Beispiel Code (die Klasse .prof-data soll in diesem Fall voll sichtbar sein):
Liebe Grüße, Toeb
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):
Code:
<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