如何使用CSS變數從資料屬性動態設定背景影像？

使用資料屬性透過CSS 自訂元素外觀

在Web 開發領域，有多種方法可以控制元素的外觀使用CSS 的網頁上的元素。常見的方法是指定元素的背景圖像。然而，當使用動態生成的 HTML 時，獲取圖像來源​​ URL 成為一個挑戰。

考慮以下 HTML 結構：

<div class="thumb" data-image-src="images/img.jpg"></div>

我們的目標是利用 data-image-src HTML 中的屬性為 CSS 中的每個 .thumb 元素設定背景圖片 URL。

.thumb {
    width: 150px;
    height: 150px;
    background-position: center center;
    overflow: hidden;
    border: 1px solid black;

    /* The key issue: How to use the data-image-src attribute to set the background image? */
    background-image: attr(data-image-src);
}

雖然預期的語法是正確的，它不會按預期工作。為了解決這個問題，我們可以採用一種利用 CSS 變數的技術。透過將圖像來源 URL 儲存在 CSS 變數中，我們可以在 background-image 屬性中引用它。

<div class="thumb">
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

利用 CSS 變數提供跨瀏覽器相容性，確保技術正常運作適用於各種瀏覽器，包括那些不支援完整資料屬性功能的瀏覽器。

現在，瀏覽器將基於動態設定每個.thumb 元素的背景圖像在其對應的data-image-src 屬性中指定的值上，提供一種靈活有效的方法來使用data-attributes控制元素外觀。