Kann CSS Hintergrundbild und Deckkraft in einer einzigen Eigenschaft kombinieren?

Können Hintergrundbilder und Deckkraft in einer Eigenschaft festgelegt werden?

Mit CSS können Sie Hintergrundtransparenz und Hintergrundbilder separat festlegen, aber wie geht das? Erzielen Sie ein transparentes Hintergrundbild?

Beispiel Szenario:

Stellen Sie sich ein Bild vor, das als Hintergrund optisch überwältigend wäre, wenn es bei voller Deckkraft verwendet würde. Sie möchten die Deckkraft auf etwa 0,2 reduzieren, um einen subtileren Effekt zu erzielen.

Traditioneller Ansatz:

Durch die alleinige Verwendung der Eigenschaft „Hintergrundbild“ wird die Transparenz des Bildes nicht angepasst .

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

Lösung: Pseudo-Element Hack

Um ein transparentes Hintergrundbild zu erstellen, verwenden Sie ein Pseudoelement:

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

Erklärung:

• Das :after Pseudo-Element erstellt ein neues Element innerhalb des #main-Div.
• Es hat keinen Inhalt (Inhalt: ""), also es ist optisch nicht erkennbar.
• Es ist absolut oben links in #main positioniert und deckt dessen gesamte Fläche ab.
• Die reduzierte Deckkraft von 0,2 macht das Hintergrundbild transparent.
• Der Z-Index von -1 platziert das Bild hinter dem Inhalt in #main.

Das obige ist der detaillierte Inhalt vonKann CSS Hintergrundbild und Deckkraft in einer einzigen Eigenschaft kombinieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!