Können CSS-Variablen innerhalb der Funktion „url()' verwendet werden?

Können CSS-Variablen mit url() interpolieren?

Trotz der weit verbreiteten Verwendung von CSS-Variablen gibt es immer noch eine Einschränkung bei der Interpolation sie innerhalb der Funktion url(). Diese Einschränkung ergibt sich aus der veralteten Natur des url()-Tokens.

In modernem CSS ist die Interpolation benutzerdefinierter Eigenschaften eine grundlegende Funktion. Es ermöglicht das Einfügen dynamischer Werte in verschiedene Funktionen, beispielsweise rgba(). Die Funktion url() stellt jedoch eine Ausnahme von dieser Regel dar.

Bei Verwendung von url(var(--url)) interpretiert der Parser es als ein einzelnes url()-Token, nicht als eine Kombination davon ein url()-Funktionstoken und einen Variablenausdruck. Infolgedessen wird die Variable selbst als URL behandelt, wodurch die Interpolation ungültig wird.

Um dieses Problem zu umgehen, vermeiden Sie die Erstellung von URL-Tokens aus mehreren Variablenausdrücken in url(). Dazu gehören Ansätze wie --uo: url(; --uc: ); und Hintergrund: var(--uo) var(--url) var(--uc);. Benutzerdefinierte Eigenschaften dürfen keine nicht übereinstimmenden Zeichenfolgentrennzeichen oder Teile von URL()-Tokens enthalten.

Für Hintergründe besteht die Lösung darin, den vollständigen url()-Ausdruck innerhalb der benutzerdefinierten Eigenschaft anzugeben und ihn direkt zu ersetzen:

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

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

Alternativ kann JavaScript verwendet werden, um die Interpolation anstelle von var() durchzuführen.

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