為什麼 CSS 變數不能直接在 `url()` 函數中使用？

使用 url() 插入 CSS 變數

自訂屬性（CSS 變數）提供了一種儲存和重複使用樣式值的有效方法。然而，用戶在嘗試在 url() 函數中插入這些變數時遇到了挑戰。

為什麼 CSS 變數不能用 url() 插入？

儘管像 rgba() 這樣的 CSS 函數具有插值功能，但 url() 卻是一個明顯的例外。出現此問題的原因是解析器將 url(var(--url)) 解釋為單一無效的 url() 標記，而不是函數呼叫。這會阻止 var() 表達式被求值並導致無效的後台宣告。

遺留原因

無法在 url() 中插入變數可以歸因於遺留原因。 url() 標記的解析保持不變，以保持與早期 CSS 版本的向後相容性。

替代解決方案

雖然url() 不可能進行變數插值，但有是實現類似效果的替代方法：

1. 定義URL自訂屬性中的表達式： 不要在url() 函數中插入變量，而是將整個URL指定為自訂屬性。例如：

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

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

2. 使用 JavaScript： 使用 JavaScript，您可以從 CSS 變數動態建立 url() 表達式，並使用 background 屬性應用它。

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