如何在不使用 JavaScript 的情況下使用 CSS 動態設定背景圖片？

使用CSS 變數從HTML 資料屬性動態分配背景影像

問題：

如何利用CSS根據HTML 資料屬性中儲存的值會自動設定元素的背景圖像，而不依賴JavaScript？

答案：

CSS 變數提供了此問題的解。 CSS 變數允許根據 HTML 元素中定義的值動態自訂樣式。這是一個例子：

HTML:

<div class="thumb">

CSS:

.thumb {
    background-image: var(--background);
}

CSS:

在HTML 程式碼中，style屬性用於定義名為 --background 的 CSS 變量，並為其指定所需背景圖像的 URL。在 CSS 程式碼中，background-image 屬性引用 --background 變數來取得其值。 當頁面載入時，瀏覽器會解析 HTML 和 CSS 程式碼。它識別 HTML 中定義的 CSS 變量，並將其值應用於具有 .thumb 類別的元素的背景圖像屬性。

Codepen 示範：

https: //codepen.io/bruce13/pen/bJdoZW

注意：注意：Internet Explorer 不支援CSS 變數。如果需要支援 IE，可能需要其他方法。

以上是如何在不使用 JavaScript 的情況下使用 CSS 動態設定背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！