Jak użyć atrybutu danych do ustawienia obrazu tła w CSS?

Question

Mam folder z kilku obrazów tła (one.jpg, two.jpg, three.jpg) i to znaczników

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

Byłoby możliwe jakoś tylko z CSS zrobić coś takiego ?

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

Ten kod nie działa, oczywiście.

Answer 1

To nie będzie możliwe z czystego css chyba że robisz to „undynamic” sposób:

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

Może można dynamicznie utworzyć ten arkusz stylów od nazw plików po stronie serwera.

Inną (prawdopodobnie łatwiejszą) możliwością jest zrobienie tego przy pomocy JavaScript - ale ponieważ wykluczyłeś, zakładam, że wiesz o tym i po prostu nie chcesz z niego korzystać.

Answer 2

Wiem, że oryginalne pytanie podkreślało, że robi to tylko z CSS, ale dostałem to pytanie, ponieważ inne pytanie (które niekoniecznie wymagało rozwiązania CSS) zostało oznaczone jako duplikat tego. Oto, czego używam jako rozwiązanie, w przypadku pomaga kogoś innego, i wykorzystuje JavaScript w/jQuery:

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