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

这段代码当然不能工作。

- Enrique Moreno Tent

---

不是使用纯CSS，而是使用JavaScript - 这对您来说是一个选项吗？ - oezi

我的目标是用CSS实现它。 - Enrique Moreno Tent

根据CSS3增强版的attr()（需要引用字符串）您应该能够做到这一点，但是目前没有已知的实现。像oezi建议的那样，您唯一的方法是将它们硬编码。 - BoltClock

Answer 1

除非你以“不动态”的方式进行操作，否则纯CSS无法实现这一点：

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

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

另一个可能更容易的方法是使用JavaScript，但由于你排除了它，我假设你知道这一点，只是不想使用它。

- oezi

---

糟糕 :( 谢谢。我可以使用SASS，但这不是我的首选解决方案。 - Enrique Moreno Tent

Answer 2

我知道原始问题强调只使用CSS来解决，但我看到了这个问题是因为另一个问题（并不一定要求CSS解决方案）被标记为重复。以下是我正在使用的解决方案，以防对其他人有帮助，它使用了JavaScript和jQuery：

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

- Nagisa