程式碼中的許多元素都遵循以下模式:
您的目標是將這些元素的背景圖像設定為值使用純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>
在此範例中,--bg-image 屬性在樣式表中定義並指派給圖片 URL。 div 元素上的 style 屬性使用內聯樣式設定 --bg-image 的值。這使您可以為每個單獨的元素指定背景圖像,而無需修改樣式表。
透過利用自訂屬性,您可以透過資料屬性設定背景影像,從而獲得靈活性和可維護性。
以上是如何使用資料屬性在CSS中動態設定背景圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!