css3 - que - selectores avanzados css

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

Question

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:
<div class="thumb" data-image-src="images/img.jpg"></div>

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 objetivo 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 dinámico de lo que estoy buscando:
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

¿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.

Answer 2

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 .

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

});

Demostración en JSFiddle

Puedes hacer esto también con JavaScript.

Answer 4

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 etiquetas <script> en la parte inferior justo antes de la etiqueta </body> o envuelve una función a la que llamas una vez cargada la página.

Answer 5

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

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

Answer 6

CÓDIGO 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>

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