Kann ich CSS-Variablen innerhalb einer „url()'-Funktion verwenden?

Kann ich CSS-Variablen innerhalb eines URL-Ausdrucks interpolieren?

In CSS bieten benutzerdefinierte Eigenschaften (auch als CSS-Variablen bezeichnet) eine praktische Möglichkeit um Werte programmgesteuert zu speichern und zu ändern. Benutzer können jedoch auf Einschränkungen stoßen, wenn sie versuchen, Variablenwerte innerhalb der URL-Funktion zu interpolieren, beispielsweise in der Hintergrundeigenschaft.

Beispiel:

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

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

Leider ist eine solche Interpolation innerhalb der nicht möglich url()-Funktion aus veralteten Gründen. CSS-Parser behandeln url(var(--url)) nicht als separate Token, sondern als einzelnes ungültiges url()-Token.

Obwohl Interpolation allgemein für CSS-Funktionen wie rgba() verfügbar ist, ist sie für nicht zulässig url() aufgrund möglicher Mehrdeutigkeiten und Analyseprobleme.

Daher ist es sinnvoll, die gesamte URL-Zeichenfolge innerhalb der benutzerdefinierten Eigenschaft explizit zu definieren notwendig:

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

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

Alternativ kann JavaScript verwendet werden, um die gewünschte Interpolation durchzuführen.

Das obige ist der detaillierte Inhalt vonKann ich CSS-Variablen innerhalb einer „url()'-Funktion verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!