Wie kann ich transparente Hintergrundbilder mit Deckkraftsteuerung in CSS erstellen?

Transparente Hintergrundbilder mit Deckkraftsteuerung

In CSS sind das Festlegen eines Hintergrundbilds und das Anpassen seiner Deckkraft separate Aufgaben. Es ist jedoch möglich, diese beiden zu kombinieren, um ein transparentes Hintergrundbild zu erstellen.

Hintergrundbild und Deckkraft festlegen

Um ein Hintergrundbild festzulegen, verwenden Sie die Eigenschaft „Hintergrundbild“ mit einer gültigen Bild-URL . Zum Beispiel:

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

Um die Deckkraft des Hintergrundbilds festzulegen, verwenden Sie die Eigenschaft opacity. Der Wert reicht von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig).

Das direkte Anwenden von Deckkraft auf die Eigenschaft „Hintergrundbild“ wirkt sich jedoch nur auf das Bild aus, nicht auf den Hintergrund selbst. Um ein transparentes Hintergrundbild zu erhalten, benötigen wir einen zusätzlichen Schritt.

Erstellen einer transparenten Hintergrundebene

Um eine transparente Ebene über dem Hintergrundbild zu erstellen, verwenden Sie das folgende CSS:

#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;
}

In diesem CSS:

• #main:after erstellt ein Pseudoelement, das transparent ist Ebene.
• Position: Absolut platziert die Ebene über dem Hauptelement.
• Opazität: 0,2 setzt die Deckkraft der Ebene auf 20 %.
• Z-Index: -1 stellt dies sicher Die Ebene befindet sich hinter dem Inhalt des Hauptelements.

Durch die Kombination dieser CSS-Techniken können Sie transparente Hintergrundbilder mit Präzision erstellen Deckkraftkontrolle.

Das obige ist der detaillierte Inhalt vonWie kann ich transparente Hintergrundbilder mit Deckkraftsteuerung in CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!