我有一个包含一些背景图片(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);
}
当然,这段代码是行不通的。
最佳答案
这对于纯 css 是不可能的,除非你以“非动态”的方式进行:
.slide[data-bg="one"]{
background-image: url('img/one.jpg');
}
.slide[data-bg="two"]{
background-image: url('img/two.jpg');
}
...
也许您可以在服务器端根据您的文件名动态创建该样式表。
另一种(可能更容易)的可能性是使用 JavaScript 执行此操作 - 但由于您排除了这一点,我假设您知道它并且只是不想使用它。
关于css - 如何使用数据属性在 CSS 中设置背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11117915/