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

使用CSS 自訂屬性來設定背景圖像

程式碼中的許多元素都遵循以下模式：

您的目標是將這些元素的背景圖像設定為值使用純CSS 儲存在data-image 屬性中。

先前的嘗試

您嘗試使用以下 CSS 程式碼來實現此目的：

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

而邊框正確顯示，背景圖片不受影響。

使用自訂的解決方案屬性

使用資料屬性的可行替代方法是使用 CSS 自訂屬性。由於它們的值不限於字串，因此您可以指派任何有效類型。

此外，自訂屬性可讓您透過樣式表交換動態更新值。

以下是如何使用自訂屬性設定背景圖片：

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div>
<p>在此範例中，--bg-image 屬性在樣式表中定義並指派給圖片 URL。 div 元素上的 style 屬性使用內聯樣式設定 --bg-image 的值。這使您可以為每個單獨的元素指定背景圖像，而無需修改樣式表。 </p>
<p>透過利用自訂屬性，您可以透過資料屬性設定背景影像，從而獲得靈活性和可維護性。 </p>
</div>

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