HTML 資料屬性：動態設定CSS 背景影像
目標是基於資料屬性動態設定元素的背景影像在HTML 中，特別是使用.thumb 元素來顯示縮圖。
在HTML 結構中，每個縮圖div 都有data-image-src 屬性指定影像的URL：
最初，期望是使用attr 函數設定CSS 背景影像：
但是，這種方法沒有奏效。作為替代解決方案，引入了 CSS 變數。
使用 CSS 變數
CSS 變數可讓您宣告變數並在您的應用程式中使用它。 styles:
在上面的 HTML 中，--background 變數是使用 style 設定的屬性。
在 CSS 中，background-image 屬性現在引用 --background 變數。這可確保每個 .thumb 元素使用其對應的 data-image-src 屬性中指定的 URL 作為其背景圖像。
Codepen 範例
動態範例方法可以在：
https://codepen.io/bruce13/pen/bJdoZW
以上是如何使用資料屬性動態設定CSS背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
