如何使用数据属性在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中文网其他相关文章！