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

使用 HTML 数据属性设置 CSS 背景图像 URL

创建自定义照片库需要仔细考虑 HTML 结构和 CSS。要根据 HTML 数据属性动态确定 CSS 背景图像 URL，我们可以利用 CSS 变量。

HTML Thumb Format

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

CSS使用 CSS 变量

.thumb {
    --background: url(attr(data-image-src)); /* Store URL in CSS variable */
    
    background-image: var(--background); /* Use CSS variable for background image */
}

通过这种方法，div.thumb 中的 data-image-src 存储在 CSS 变量中。随后，background-image 属性引用 CSS 变量来动态设置背景图像 URL。

浏览器支持
Internet Explorer 不支持 CSS 变量，需要采用替代方法。为了兼容 IE，建议使用 CSS 预处理器或 JavaScript 的解决方案。

代码示例

<div class="thumb">

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

可以在此处找到演示此技术的 CodePen 示例：https://codepen.io/bruce13/pen/bJdoZW

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