सीएसएस में पृष्ठभूमि-छवि सेट करने के लिए मैं डेटा विशेषता का उपयोग कैसे कर सकता हूं?

Question

मैं कुछ पृष्ठभूमि छवियों (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> 

यह सिर्फ सीएसएस इस तरह कुछ करने के लिए के साथ किसी भी तरह संभव है ?

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

यह कोड निश्चित रूप से काम नहीं कर रहा है।

Answer 1

यह शुद्ध सीएसएस के साथ संभव जब तक आप इसे "undynamic" जिस तरह से कर रहे हैं नहीं होगा:

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

शायद तुम गतिशील सर्वर साइड पर अपने फ़ाइल नाम से है कि स्टाइलशीट बना सकते हैं।

जावास्क्रिप्ट के साथ ऐसा करने के लिए एक और (संभवतः आसान) संभावना है - लेकिन चूंकि आपने यह स्वीकार किया है कि मुझे लगता है कि आप इसके बारे में जानते हैं और बस इसका उपयोग नहीं करना चाहते हैं।

Answer 2

मुझे पता है कि मूल प्रश्न केवल सीएसएस के साथ ऐसा करने पर जोर दिया गया है, लेकिन मुझे यह सवाल उठ गया क्योंकि एक और सवाल (जो कि सीएसएस समाधान के लिए जरूरी नहीं था) को इसका डुप्लिकेट के रूप में चिह्नित किया गया था। - यह आपके लिए एक विकल्प है

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