CSS Wie setze Deckkraft tief

Question

Ich möchte die Opazität des Avatars des Benutzers durch alle Ebenen auf 1 Ebene setzen. Gibt es dafür eine Lösung? Vielleicht etwas mit Z-Index oder etwas anderes?

Answer 1

Ich hatte die folgende Annahme machen, wie Sie keinen HTML/CSS mit Ihrer Frage enthalten sind: Layer 1 ist ein Hintergrundbild verwenden, im Gegensatz zu einem festen <img.../> Tag mit z-index Satz unten alle anderen Inhalte.

Dies ist die minimale Menge an HTML/CSS, die ich benötigt habe, um Ihr Beispielbild zu erstellen.

Der Trick hier ist background-attachment: fixed. Dies ist wie mit position:fixed auf einem anderen Element. Dadurch wird das Hintergrundbild (standardmäßig) auf 0 px x 0 px relativ zum Fenster und nicht zum Dokument platziert. Wenn Sie dies Layer 1 und Layer 3 zuweisen, können Sie dasselbe Hintergrundbild über die Elemente legen, um den Eindruck zu erwecken, dass Layer3 halbtransparent ist und Layer1 angezeigt wird.

Beachten Sie, dass Sie ein Bild über ein anderes legen. Wenn Sie also das Hintergrundbild auf layer1 ändern, sieht es auf layer3 nicht richtig aus. Daher möchten Sie möglicherweise ein sehr großes Hintergrundbild haben, das bei jeder Auflösung gut aussieht.

Um die "Transparenz" zu veranschaulichen, habe ich Schicht2 einen durchgehend weißen Hintergrund gegeben.

Klicken Sie auf "Code-Snippet ausführen", um eine neue Reihe von Bildern zu laden.

.layer1, 
 
.layer3 { 
 
    background: url(http://lorempixel.com/1000/800/sports/) no-repeat scroll 0 0 transparent; 
 
    background-attachment:fixed; 
 
} 
 
.layer2 { 
 
    background-color:#fff; 
 
    width:70%; 
 
    margin:0 auto; 
 
} 
 
.layer3 { 
 
    display:inline-block; 
 
} 
 
.layer3 img { 
 
    opacity:0.7; 
 
}

<div class="layer1"> 
 
    <div class="layer2"> 
 
    <ul> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/abstract/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/city/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/people/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/transport/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/cats/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/sports/"/></div></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Halten Schicht "2" als eine CSS-Regel Grenze.

Brechen Sie die Schicht "3" in separate Komponenten.

Für die Grün Komponente: Stellen Sie die Rahmengröße je nach Anforderung und Hintergrund transparent

Für die Red Komponente: stellen Sie den Hintergrund als weiß und andere CSS-Regeln, wie es Ihnen beliebt.