css - 如何使用数据属性在 CSS 中设置背景图像？

Question

我有一个文件夹，里面有一些背景图片 (one.jpg, two.jpg, three.jpg) 和这个标记

<section class="slide" data-bg="one"></section>
<section class="slide" data-bg="two"></section>
<section class="slide" data-bg="three"></section>

是否有可能仅使用 CSS来做这样的事情？

.slide{
    background-image: url(img/attr(data-bg).jpg);
}

当然，这段代码不起作用。

score 13 · Accepted Answer

除非您以“非动态”方式执行此操作，否则纯 css 将无法做到这一点：

.slide[data-bg="one"]{
  background-image: url('img/one.jpg');
}
.slide[data-bg="two"]{
  background-image: url('img/two.jpg');
}
...

也许您可以从服务器端的文件名动态创建该样式表。

另一种（可能更容易）的可能性是使用 JavaScript 执行此操作 - 但由于您排除了我假设您知道这一点并且不想使用它。

score 1 · Accepted Answer

我知道最初的问题强调只用 CSS 来做，但我之所以提出这个问题，是因为另一个问题（不一定要求 CSS 解决方案）被标记为与此问题重复。这是我用作解决方案的方法，以防它帮助其他任何人，并且它使用带有 jQuery 的 javascript：

$('.slide').each(function (index) {
    var slide = $(this);
    slide.css('background-image', 'url(' + slide.data('bg') + ')');
});

2 回答 2