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

來自 data-image 屬性的CSS背景圖像

在 HTML 中，元素通常具有用於儲存附加資訊的資料屬性。將背景圖像設定為資料屬性的值只能透過 CSS 來實現。

問題

提供的 CSS 程式碼：

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

無法顯示背景圖片。

解決方案：自訂屬性

另一種方法是使用CSS自訂屬性，它允許設定任何類型的值，包括URL。

.kitten {
  background-image: var(--bg-image);
}

然後，在元素的樣式中設定自訂屬性屬性：

<div class="kitten">

此方法允許透過 CSS 變更或腳本互動動態更新背景圖片。

以上是如何使用資料屬性設定CSS背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！