如何使用 HTML 資料屬性和 CSS 變數建立動態圖像背景？

使用HTML 資料屬性和CSS 的動態圖像背景

問題：

假設你🎜>問題：

假設你🎜>問題：假設你🎜>問題：

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

HTML 程式碼：

.thumb {
    background-image: attr(data-image-src);
}

CSS 程式碼（有問題的部分） ):

目標是提取data-image-src值，並將其設定為CSS 檔案中該div 的背景圖像。

解決方案：

使用 CSS 變數可以實現此目的，而無需jQuery 或特定於瀏覽器的 hack。請注意，Internet Explorer 不支援 CSS 變數。

<div class="thumb">

更新的HTML 程式碼：

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

更新的CSS 程式碼：

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

以上是如何使用 HTML 資料屬性和 CSS 變數建立動態圖像背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！