Usar el atributo de datos HTML para configurar la URL de la imagen de fondo de CSS

Planeo construir una galería de fotos personalizada para un amigo y sé exactamente cómo voy a producir el HTML, sin embargo, estoy teniendo un pequeño problema con el CSS.
(Preferiría que el diseño de la página no dependa de jQuery si es posible)


Mi pregunta se refiere a:
Data-Attribute en HTML
Background-image en CSS


Estoy usando este formato para mis miniaturas html:

y supongo que el CSS debería verse más o menos así:

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


Mi objective es tomar data-image-src de div.thumb en mi archivo HTML y usarlo para cada div.thumb (s) background-image source en mi archivo CSS.

Aquí hay un lápiz Codepen para obtener un ejemplo dynamic de lo que estoy buscando:
http://codepen.io/thestevekelzer/pen/rEDJv

Eventualmente podrás usar

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

pero eso no se ha implementado en ningún otro lugar que yo sepa. En lo anterior, url es un parámetro opcional de “tipo o unidad” para attr() . Ver https://drafts.csswg.org/css-values/#attr-notation .

No es una buena práctica mezclar contenido con estilo, pero una solución podría ser

 

Necesitarás un poco de JavaScript para eso:

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

Envuelve eso en las tags en la parte inferior justo antes de la etiqueta o envuelve una función a la que llamas una vez cargada la página.

HTML

 

jQuery

 $( ".thumb" ).each(function() { var attr = $(this).attr('data-image-src'); if (typeof attr !== typeof undefined && attr !== false) { $(this).css('background', 'url('+attr+')'); } }); 

Demostración en JSFiddle

Puedes hacer esto también con JavaScript.

¿Qué hay de usar un poco de Sass? Esto es lo que hice para lograr algo como esto (aunque tenga en cuenta que debe crear una lista Sass para cada uno de los atributos de datos).

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

Esencialmente, enumera todos sus valores de atributos de datos. Luego use Sass @each para recorrer y seleccionar todos los atributos de datos en el HTML. Luego, ingrese la variable del iterador y haga que coincida con un nombre de archivo.

De todos modos, como dije, tienes que enumerar todos los valores, luego asegúrate de que los nombres de tus archivos incorporen los valores en tu lista.

CÓDIGO HTML

 

CÓDIGO JS

 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";