如何使用CSS变量从数据属性动态设置背景图像？

使用数据属性通过 CSS 自定义元素外观

在 Web 开发领域，有多种方法可以控制元素的外观使用 CSS 的网页上的元素。一种常见的方法是指定元素的背景图像。然而，当使用动态生成的 HTML 时，获取图像源 URL 成为一个挑战。

考虑以下 HTML 结构：

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

我们的目标是利用 data-image-src HTML 中的属性为 CSS 中的每个 .thumb 元素设置背景图像 URL。

.thumb {
    width: 150px;
    height: 150px;
    background-position: center center;
    overflow: hidden;
    border: 1px solid black;

    /* The key issue: How to use the data-image-src attribute to set the background image? */
    background-image: attr(data-image-src);
}

虽然预期的语法是正确的，它不会按预期工作。为了解决这个问题，我们可以采用一种利用 CSS 变量的技术。通过将图像源 URL 存储在 CSS 变量中，我们可以在 background-image 属性中引用它。

<div class="thumb">
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

利用 CSS 变量提供跨浏览器兼容性，确保该技术正常工作适用于各种浏览器，包括那些不支持完整数据属性功能的浏览器。

现在，浏览器将基于动态设置每个 .thumb 元素的背景图像在其相应的 data-image-src 属性中指定的值上，提供一种灵活有效的方法来使用 data-attributes 控制元素外观。