Kann eine einzelne CSS-Eigenschaft sowohl Hintergrundbild als auch Deckkraft festlegen?

Hintergrundbild und Deckkraft in einer einzelnen Eigenschaft festlegen

Frage:

Kann ich ein transparentes Hintergrundbild mit a festlegen? einzelne CSS-Eigenschaft? Wenn ja, wie?

Problem mit dem Originalbild:

Das bereitgestellte Bild („tandem.jpg“) ist zu hell, daher möchten Sie seine Deckkraft verringern auf etwa 0,2, während die Verwendung als Hintergrund erhalten bleibt Bild.

Lösung:

Obwohl es keine direkte CSS-Eigenschaft gibt, mit der Sie sowohl das Hintergrundbild als auch die Deckkraft gleichzeitig festlegen können, können Sie das gewünschte Ergebnis wie folgt erzielen Technik:

#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:

• Erstellen Sie ein neues Element (#main:after) als untergeordnetes Element des Hauptelements (#main). Dieses Element wird verwendet, um das Hintergrundbild zu überlagern.
• Setzen Sie seine Position auf „absolut“, damit es relativ zu seinem übergeordneten Element positioniert werden kann.
• Verwenden Sie die Eigenschaft „content“, um eine leere Zeichenfolge festzulegen. Dadurch wird dieses Element effektiv unsichtbar, es kann aber Hintergrundstile beibehalten.
• Stellen Sie die Deckkraft auf 0,2 ein, um die gewünschte Transparenzstufe für den Hintergrund zu erreichen Bild.
• Setzen Sie den Z-Index auf -1, um sicherzustellen, dass es hinter dem Inhalt des Hauptelements angezeigt wird.

Mit dieser Technik wird effektiv eine transparente Ebene über dem Hauptelement erstellt, die den Hintergrund hervorhebt Bild mit der angegebenen Deckkraft.

Das obige ist der detaillierte Inhalt vonKann eine einzelne CSS-Eigenschaft sowohl Hintergrundbild als auch Deckkraft festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!