Wie kann ich ein Datenattribut verwenden, um ein Hintergrundbild in CSS zu setzen?

Question

Ich habe einen Ordner mit einigen Hintergrundbildern (one.jpg, two.jpg, three.jpg), und dieses Markup

<section class="slide" data-bg="one"></section> 
<section class="slide" data-bg="two"></section> 
<section class="slide" data-bg="three"></section> 

es möglich, irgendwie nur mit CSS sein würde, so etwas zu tun ?

.slide{ 
    background-image: url(img/attr(data-bg).jpg); 
} 

Dieser Code funktioniert natürlich nicht.

Answer 1

Dies wird nicht mit reinem CSS möglich sein, wenn Sie ihm die „undynamische“ Art und Weise tun:

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

Vielleicht Sie dynamisch, dass Sheet aus dem Dateinamen auf Server-Seite erstellen können.

Eine andere (wahrscheinlich einfachere) Möglichkeit besteht darin, dies mit JavaScript zu tun - aber da Sie ausgeschlossen haben, nehme ich an, dass Sie davon wissen und es einfach nicht verwenden wollen.

Answer 2

Ich weiß, die ursprüngliche Frage betonte, es mit nur CSS zu tun, aber ich kam zu dieser Frage, weil eine andere Frage (die nicht unbedingt für eine CSS-Lösung) als ein Duplikat markiert wurde. Hier ist, was ich als die Lösung bin mit, falls es hilft jemand anderes, und es nutzt Javascript w/jQuery:

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