CSS 變數可以在 `url()` 函數中使用嗎？

CSS 變數可以用 url() 進行內插嗎？

儘管 CSS 變數被廣泛使用，但在插值方面仍然存在限制它們在 url() 函數中。此限制源自於 url() 標記的遺留性質。

在現代 CSS 中，自訂屬性的內插法是一項基本功能。它允許將動態值插入到各種函數中，例如 rgba()。但是， url() 函數是此規則的例外。

當使用 url(var(--url)) 時，解析器將其解釋為單一 url() 標記，而不是一個 url() 函數標記和一個變數表達式。因此，變數本身被視為 URL，從而導致插值無效。

要避免此問題，請避免在 url() 中從多個變數表達式建構 URL 標記。這包括諸如 --uo: url(; --uc: ); 之類的方法和背景：var(--uo) var(--url) var(--uc);。自訂屬性不能包含不符合的字串分隔符號或 url() 標記的一部分。

對於背景，解決方案在於在自訂屬性中指定完整的url() 表達式並直接取代它：

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

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

或者，可以使用JavaScript 代替var() 來執行插值。

以上是CSS 變數可以在 `url()` 函數中使用嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！