如何使用数据属性在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做到这一点 - 但是因为你排除了我假设你知道这一点而只是不想使用它.