Wie kann ich ein Datenattribut verwenden, um ein CSS-Hintergrundbild festzulegen?

CSS-Hintergrundbild aus Datenbild-Attribut

In HTML verfügen Elemente häufig über Datenattribute, die zum Speichern zusätzlicher Informationen verwendet werden. Das Festlegen eines Hintergrundbilds auf den Wert eines Datenattributs kann ausschließlich über CSS erreicht werden.

Das Problem

Der bereitgestellte CSS-Code:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

Das Hintergrundbild wird nicht angezeigt.

Die Lösung: Benutzerdefiniert Eigenschaften

Ein alternativer Ansatz besteht darin, benutzerdefinierte CSS-Eigenschaften zu verwenden, die das Festlegen jeder Art von Wert, einschließlich URLs, ermöglichen.

.kitten {
  background-image: var(--bg-image);
}

Dann legen Sie die benutzerdefinierte Eigenschaft im Stil des Elements fest Attribut:

<div class="kitten"><p>Dieser Ansatz ermöglicht dynamische Aktualisierungen des Hintergrundbilds durch CSS-Änderungen oder Skriptinteraktionen.</p></div>

Das obige ist der detaillierte Inhalt vonWie kann ich ein Datenattribut verwenden, um ein CSS-Hintergrundbild festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!