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

使用 CSS 變數內插

CSS 變數可以使用 url() 函數插值嗎？

自訂 CSS 屬性有助於大多數函數的內插法，包括 rgba()。然而，由於遺留原因，使用 url() 進行內插會帶來挑戰。

url() 的限制是什麼？

url() 令牌不能拆分為var() 表達式，因為解析器將 var(--url) 視為不含引號的 URL。因此，插值不會發生，導致後台聲明無效。

替代方法

為了避免 url() 限制，可行的選項包括：

• 在自訂中指定整個 url()表達式property:

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

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

• 使用 JavaScript 進行插值而不是 var()。

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