Wie kann ich Hintergrundbilder in CSS mithilfe von Datenattributen dynamisch festlegen?

Hintergrundbild mit benutzerdefinierten CSS-Eigenschaften festlegen

Viele Elemente in Ihrem Code folgen dem Muster:

Sie möchten das Hintergrundbild dieser Elemente auf den im gespeicherten Wert setzen data-image-Attribut, unter Verwendung von reinem CSS.

Vorherige Versuche

Sie haben versucht, den folgenden CSS-Code zu verwenden, um dies zu erreichen:

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

Während der Rahmen korrekt angezeigt wurde , das Hintergrundbild blieb davon unberührt.

Lösung mit benutzerdefinierten Eigenschaften

Eine praktikable Alternative zur Verwendung von Daten attributes besteht darin, benutzerdefinierte CSS-Eigenschaften zu verwenden. Da ihre Werte nicht auf Zeichenfolgen beschränkt sind, können Sie jeden gültigen Typ zuweisen.

Darüber hinaus ermöglichen Ihnen benutzerdefinierte Eigenschaften die dynamische Aktualisierung von Werten durch einen Stylesheet-Austausch.

So können Sie benutzerdefinierte Eigenschaften verwenden So legen Sie das Hintergrundbild fest:

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div>

In diesem Beispiel wird die Eigenschaft --bg-image im Stylesheet definiert und der Bild-URL zugewiesen. Das style-Attribut des div-Elements legt den Wert von --bg-image mithilfe des Inline-Stils fest. Dadurch können Sie das Hintergrundbild für jedes einzelne Element angeben, ohne das Stylesheet zu ändern.

Durch die Nutzung benutzerdefinierter Eigenschaften gewinnen Sie Flexibilität und Wartbarkeit beim Festlegen von Hintergrundbildern über Datenattribute.

Das obige ist der detaillierte Inhalt vonWie kann ich Hintergrundbilder in CSS mithilfe von Datenattributen dynamisch festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!