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

Question 1

मैं एक दोस्त के लिए एक कस्टम फोटो गैलरी बनाने की योजना बना रहा हूं और मुझे पता है कि मैं कैसे एचटीएमएल का निर्माण करने जा रहा हूं, हालांकि मैं सीएसएस के साथ एक छोटी सी समस्या में चल रहा हूं।
(यदि संभव हो तो मैं jQuery पर भरोसा करते हुए पेज स्टाइल को पसंद नहीं करूंगा)

मेरा प्रश्न का संबंध है:
Data-AttributeHTML
Background-imageमें सीएसएस में

मैं अपने HTML थंबनेल के लिए इस प्रारूप का उपयोग कर रहा हूं:
<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*/
}

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

यहाँ एक कोडपेन पेन है, जिसका मैं एक गतिशील उदाहरण प्राप्त करने के लिए देख रहा हूँ:
http://codepen.io/thestevekelzer/pen/rEDJv

Question 2

आप अंततः उपयोग करने में सक्षम होंगे

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

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

Question 3

यदि आप इसे केवल HTML और CSS के साथ रखना चाहते हैं तो आप CSS वेरिएबल्स का उपयोग कर सकते हैं। ध्यान रखें, IE में css चर समर्थित नहीं हैं ।

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

.thumb {
    background-image: var(--background);
}

कोडपेन: https://codepen.io/bruce13/pen/bJdoZW

Question 4

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

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

Question 5

इसके लिए आपको थोड़ा जावास्क्रिप्ट की आवश्यकता होगी:

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>टैग में लपेटें जो टैग से पहले सबसे नीचे हो </body>या किसी फ़ंक्शन में लपेटें जिसे आप पेज लोड होने के बाद कहते हैं।

Question 6

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

/*
  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 में सभी डेटा-विशेषताओं का चयन करें। फिर, इटरेटर वैरिएबल में लाएँ और इसे एक फ़ाइल नाम तक मिलाएँ।

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

Question 7

एचटीएमएल

<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 पर डेमो

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

Question 8

उन लोगों के लिए जो मेरे जैसा एक बेवकूफ जवाब चाहते हैं

1, 2, 3 के रूप में कदम रखने के लिए कुछ

यह वही है जो मैंने किया था

सबसे पहले HTML मार्कअप बनाएं

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

फिर आपके समाप्त होने वाले बॉडी टैग से पहले, यह स्क्रिप्ट जोड़ें

मैंने एक उदाहरण के रूप में नीचे दिए कोड पर अंतिम निकाय को शामिल किया

इसलिए जब आप कॉपी करते हैं, तो वह नहीं होता

<script>
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>

</body>

Question 9

HTML कोड

<div id="borderLoader"  data-height="230px" data-color="lightgrey" data- 
width="230px" data-image="https://fiverr- res.cloudinary.com/t_profile_thumb,q_auto,f_auto/attachments/profile/photo/a54f24b2ab6f377ea269863cbf556c12-619447411516923848661/913d6cc9-3d3c-4884-ac6e-4c2d58ee4d6a.jpg">

</div>

JS CODE

var dataValue, dataSet,key;
dataValue = document.getElementById('borderLoader');
//data set contains all the dataset that you are to style the shape;
dataSet ={ 
   "height":dataValue.dataset.height,
   "width":dataValue.dataset.width,
   "color":dataValue.dataset.color,
   "imageBg":dataValue.dataset.image
};

dataValue.style.height = dataSet.height;
dataValue.style.width = dataSet.width;
dataValue.style.background = "#f3f3f3 url("+dataSet.imageBg+") no-repeat 
center";