如何使用数据属性动态设置CSS背景图片？

HTML 数据属性：动态设置 CSS 背景图像

目标是基于数据属性动态设置元素的背景图像在 HTML 中，特别是使用 .thumb 元素来显示缩略图。

在 HTML 结构中，每个缩略图 div 都有一个data-image-src 属性指定图像的 URL：

<div class="thumb" data-image-src="images/img.jpg"></div>

最初，期望是使用 attr 函数设置 CSS 背景图像：

.thumb {
    background-image: attr(data-image-src);
}

但是，这种方法没有奏效。作为替代解决方案，引入了 CSS 变量。

使用 CSS 变量

CSS 变量允许您声明变量并在您的应用程序中使用它。 styles:

<div class="thumb">

在上面的 HTML 中，--background 变量是使用 style 设置的属性。

.thumb {
    background-image: var(--background);
}

在 CSS 中，background-image 属性现在引用 --background 变量。这可确保每个 .thumb 元素使用其相应的 data-image-src 属性中指定的 URL 作为其背景图像。

Codepen 示例

动态示例方法可以在：

https://codepen.io/bruce13/pen/bJdoZW

以上是如何使用数据属性动态设置CSS背景图片？的详细内容。更多信息请关注PHP中文网其他相关文章！