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);
}

当然，这段代码是行不通的。

Answer 1

这对于纯 css 是不可能的，除非你以“非动态”的方式进行:

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

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

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