如何使用資料屬性動態設定CSS背景圖片？

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中文網其他相關文章！