Können CSS-Variablen mit der Funktion „url()' interpoliert werden?

Interpolation mit CSS-Variablen

Können CSS-Variablen mit der Funktion url() interpoliert werden?

Benutzerdefinierte CSS-Eigenschaften erleichtern die Interpolation für die meisten Funktionen, einschließlich rgba(). Allerdings stellt die Interpolation mit url() aus alten Gründen Herausforderungen dar.

Was ist die Einschränkung bei url()?

Das url()-Token kann nicht aufgeteilt werden var()-Ausdrücke, da der Parser var(--url) als URL ohne Anführungszeichen behandelt. Folglich findet keine Interpolation statt, wodurch die Hintergrunddeklaration ungültig wird.

Alternative Ansätze

Um die url()-Einschränkung zu umgehen, sind folgende mögliche Optionen möglich:

• Angabe des gesamten url()-Ausdrucks im benutzerdefinierten Eigenschaft:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

• Verwendung von JavaScript für die Interpolation anstelle von var().

Das obige ist der detaillierte Inhalt vonKönnen CSS-Variablen mit der Funktion „url()' interpoliert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!