如何使用数据属性在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);
}

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

Answer 1

除非你以“动态”的方式做到这一点，否则这对纯css是不可能的：

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

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

另一种（可能更容易）的可能性是用JavaScript做到这一点 - 但是因为你排除了我假设你知道这一点而只是不想使用它。

Answer 2

我知道最初的问题强调只用CSS做这件事，但我得到了这个问题，因为另一个问题（不一定要求CSS解决方案）被标记为重复。以下是我使用的解决方案，如果它可以帮助其他人，并且它使用javascript w / jQuery：

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