我可以在 `url()` 函數中使用 CSS 變數嗎？-css教學-PHP中文網

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

Mary-Kate Olsen

發布： 2024-12-09 21:47:10

原創

926 人瀏覽過

Can I Use CSS Variables Inside a `url()` Function?

我可以在 URL 表達式中插入 CSS 變數嗎？

在 CSS 中，自訂屬性（也稱為 CSS 變數）提供了一種便捷的方法以程式方式儲存和修改值。然而，使用者在嘗試在 URL 函數中插入變數值時可能會遇到限制，例如在背景屬性中。

例：

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

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

登入後複製

不幸的是，這種插值在由於遺留原因， url() 函數。 CSS 解析器不會將 url(var(--url)) 視為單獨的標記，而是視為單一無效的 url() 標記。

儘管插值通常可用於 rgba() 等 CSS 函數，但不允許url() 由於潛在的歧義和解析問題。

因此，在自訂屬性中明確定義整個 URL 字串是必要的：

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

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

登入後複製

或者，可以使用 JavaScript 來完成所需的插值。

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