Używanie atrybutu danych HTML do ustawienia adresu URL obrazu tła CSS

Question

Mam zamiar zbudować niestandardową galerię zdjęć dla przyjaciela i dokładnie wiem, w jaki sposób będę produkować kod HTML, jednak mam do czynienia z małym problemem z CSS.
(wolałbym nie mieć stylizacji strona polegać na jQuery jeśli to możliwe)

---

moje pytanie dotyczące:
Data-Attribute w HTML
Background-image w CSS

---

używam tego formatu dla moich html miniaturki:
<div class="thumb" data-image-src="images/img.jpg"></div>

i zakładam CSS powinien wyglądać mniej więcej tak:

.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*/ 
} 

---

Moim celem jest podjęcie data-image-src z div.thumb w moim pliku HTML i użyć go do każdego div.thumb (ów) background-image źródła w moim pliku CSS.

Oto Codepen Pen w celu uzyskania dynamicznego przykład co szukam:
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

Będziesz w końcu móc korzystać

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

ale to nie jest realizowany jeszcze nigdzie z moją wiedzą. W powyższym, url jest opcjonalnym parametrem "typ lub jednostka" dla attr(). Zobacz https://drafts.csswg.org/css-values/#attr-notation.

Answer 2

Trzeba będzie trochę JavaScript że:

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 + "')"; 
} 

Wrap że w <script> znaczniki na dole tuż przed znacznikiem </body> lub zawijają funkcję, którą wywołujesz po wczytaniu strony.

Answer 3

HTML

<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+')'); 
    } 

}); 

Demo na JSFiddle

Można to zrobić również z JavaScript.

Answer 4

To nie jest najlepsza praktyka, aby wymieszać zawartość z stylu, ale to rozwiązanie może być

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

Answer 5

Jak o użyciu niektóre Sass? Oto, co zrobiłem, aby osiągnąć coś takiego (choć pamiętaj, że musisz utworzyć listę Sass dla każdego z atrybutów danych).

/* 
    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 
    } 
} 

Zasadniczo podajesz wszystkie wartości atrybutów danych. Następnie użyj Sass @each do iteracji i zaznacz wszystkie atrybuty danych w kodzie HTML. Następnie wprowadź zmienną iteratora i dopasuj ją do nazwy pliku.

W każdym razie, tak jak powiedziałem, należy podać wszystkie wartości, a następnie upewnić się, że nazwy plików zawierają wartości na liście.