सीएसएस पृष्ठभूमि-छवि यूआरएल

Question

सेट करने के लिए एचटीएमएल डेटा-एट्रिब्यूट का उपयोग करके मैं एक दोस्त के लिए एक कस्टम फोटो गैलरी बनाने की योजना बना रहा हूं और मुझे पता है कि मैं एचटीएमएल का उत्पादन कैसे कर रहा हूं, हालांकि मैं एक छोटी सी समस्या में भाग रहा हूं सीएसएस।

---

मेरा प्रश्न का संबंध (मैं पेज स्टाइल jQuery यदि संभव हो पर भरोसा नहीं करना पसंद करेंगे): HTML में
Data-Attribute
सीएसएस में Background-image

---

मेरी एचटीएमएल थंबनेल के लिए मैं इस प्रारूप का उपयोग कर रहा हूँ:
<div class="thumb" data-image-src="images/img.jpg"></div>

और मुझे लगता है सीएसएस कुछ इस तरह दिखना चाहिए:

.thumb { 
    width:150px; 
    height:150px; 
    background-position:center center; 
    overflow:hidden; 
    border:1px solid black; 

    background-image: attr(data-image-src);/*This is the question piece*/ 
} 

---

मेरा लक्ष्य मेरा HTML फ़ाइल में div.thumb से data-image-src लेने के लिए और प्रत्येक div.thumb (रों) background-image मेरी सीएसएस फ़ाइल में स्रोत के लिए इसका इस्तेमाल करने की है।
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

आप अंततः

background-image: attr(data-image-src url); 

उपयोग करने के लिए सक्षम हो जाएगा लेकिन यह है कि मेरी जानकारी के लिए कहीं भी अभी तक लागू नहीं किया गया है। उपर्युक्त में, urlattr() पर एक वैकल्पिक "प्रकार-या-इकाई" पैरामीटर है। https://drafts.csswg.org/css-values/#attr-notation देखें।

Answer 2

आप उस के लिए एक छोटे से जावास्क्रिप्ट की आवश्यकता होगी::

var list = document.getElementsByClassName('thumb'); 

for (var i = 0; i < list.length; i++) { 
    var src = list[i].getAttribute('data-image-src'); 
    list[i].style.backgroundImage="url('" + src + "')"; 
} 

लपेटें कि <script> में

यहाँ आदेश मैं के लिए क्या देख रहा हूँ की एक गतिशील उदाहरण प्राप्त करने के लिए एक Codepen पेन ​​है </body> टैग से पहले नीचे दिए गए टैग या उस पृष्ठ में लपेटें जिसे आप पृष्ठ लोड करते समय कॉल करते हैं।

Answer 3

एचटीएमएल

<div class="thumb" data-image-src="img/image.png"> 

jQuery

$(".thumb").each(function() { 
    var attr = $(this).attr('data-image-src'); 

    if (typeof attr !== typeof undefined && attr !== false) { 
     $(this).css('background', 'url('+attr+')'); 
    } 

}); 

डेमो JSFiddle

पर आप जावास्क्रिप्ट के साथ भी ऐसा कर सकता है।

Answer 4

यह शैली के साथ सामग्री को मिश्रण सबसे अच्छा अभ्यास नहीं है, लेकिन एक समाधान हो सकता है

<div class="thumb" style="background-image: url('images/img.jpg')"></div> 

Answer 5

के बारे में कैसे कुछ सास का उपयोग कर? यहां कुछ ऐसा करने के लिए मैंने किया है (हालांकि ध्यान दें कि आपको प्रत्येक डेटा-विशेषताओं के लिए एक सास सूची बनाना है)।

/* 
    Iterate over list and use "data-social" to put in the appropriate background-image. 
*/ 
$social: "fb", "twitter", "youtube"; 

@each $i in $social { 
    [data-social="#{$i}"] { 
    background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0; 
    background-size: cover; // Only seems to work if placed below background property 
    } 
} 

अनिवार्य रूप से, आप सूची अपने सभी डेटा के गुणधर्म मान। फिर Sass @each का उपयोग करें और HTML में सभी डेटा-एट्रिब्यूट का चयन करें। फिर, इटरेटर वैरिएबल को लाएं और इसे एक फ़ाइल नाम से मेल करें।

वैसे भी, जैसा कि मैंने कहा था, आपको सभी मानों को सूचीबद्ध करना होगा, फिर सुनिश्चित करें कि आपके फ़ाइल नाम आपकी सूची में मूल्यों को शामिल करते हैं।