我有一个文件夹有几个背景图片(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来执行此操作 – 但是由于您排除了我,假设您知道这一点,只是不想使用它.
