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