Tôi làm cách nào để sử dụng thuộc tính dữ liệu để đặt hình nền trong CSS?

Question

Tôi có một thư mục với một vài hình ảnh nền (one.jpg, two.jpg, three.jpg), và đánh dấu này

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

Nó sẽ có thể bằng cách nào đó chỉ với CSS để làm một cái gì đó như thế này ?

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

Mã này không hoạt động, tất nhiên.

Answer 1

này sẽ không thể thực hiện với css tinh khiết, trừ khi bạn đang làm nó trở thành "undynamic" cách:

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

Có lẽ bạn có thể tự động tạo ra rằng stylesheet từ tên tập tin của bạn trên server-side.

Khả năng khác (có khả năng dễ dàng hơn) là làm điều này với JavaScript - nhưng vì bạn đã loại trừ rằng tôi cho rằng bạn biết về điều đó và chỉ không muốn sử dụng nó.

Answer 2

Tôi biết câu hỏi ban đầu nhấn mạnh thực hiện nó chỉ với CSS, nhưng tôi nhận được câu hỏi này bởi vì một câu hỏi khác (không nhất thiết yêu cầu giải pháp CSS) được đánh dấu trùng lặp. Dưới đây là những gì tôi đang sử dụng làm giải pháp, trong trường hợp nó giúp bất kỳ ai khác và nó sử dụng javascript w/jQuery:

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