Usando el atributo de datos HTML para establecer la URL de la imagen de fondo CSS


83

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


Mi pregunta se refiere:
Data-Attributeen HTML
Background-imageen 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 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 el data-image-srcde div.thumben mi archivo HTML y usarlo para cada div.thumb(s) background-imagefuente en mi archivo CSS.

Aquí hay un Codepen Pen para obtener un ejemplo dinámico de lo que estoy buscando:
http://codepen.io/thestevekelzer/pen/rEDJv

Respuestas:


66

Eventualmente podrás usar

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

pero que yo sepa, aún no se ha implementado en ninguna parte. En lo anterior, urles un parámetro opcional "tipo o unidad" para attr(). Consulte https://drafts.csswg.org/css-values/#attr-notation .


4
Cuando dices eventualmente , ¿hay alguna manera de saber CUÁNDO será del sitio W3 aproximadamente?
StephenKelzer

5
La conjetura aleatoria sin saber nada sobre el estado de implementación específico es de 1 a 2 años antes de que esté disponible en todas las pistas del navegador.

5
@torazaburo se acabó el año uno, todavía lleno de esperanza.
Clemens Himmer

3
No en la hoja de ruta del cromo para 2016 :( # 246571
Felipe

3
caniuse.com/#feat=css3-attr Hasta la fecha, ningún navegador ha implementado esta función.
saawsann

18

Si desea mantenerlo solo con HTML y CSS, puede usar Variables CSS. Tenga en cuenta que las variables CSS no son compatibles con IE .

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

Codepen: https://codepen.io/bruce13/pen/bJdoZW


3
Esta es probablemente la mejor respuesta en este momento. Ningún javascript es siempre bueno.
Abdalla Arbab

+1. Esta es una solución más flexible que simplemente agregar la imagen directamente en línea como en otra respuesta a continuación, porque puede declarar múltiples rutas de imagen para, digamos, múltiples resoluciones, y luego decidir en su código CSS qué imagen cargar para qué resolución.
Sumit

16

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>

6

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

Envuelva eso en <script>etiquetas en la parte inferior justo antes de la </body>etiqueta o envuelva en una función que llame una vez que se cargó la página.


2

¿Qué tal si usas algo 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 iterar y seleccionar todos los atributos de datos en el HTML. Luego, ingrese la variable de iterador y haga que coincida con un nombre de archivo.

De todos modos, como dije, debe enumerar todos los valores, luego asegúrese de que sus nombres de archivo incorporen los valores en su lista.


1
Esto requiere que tenga una lista conocida de valores en su declaración de estilos. Cuando hice esta pregunta, estaba intentando que el marcado impulsara lo que mostraban los estilos en lugar de al revés.
StephenKelzer

1
Sí, eso es toba. ¡Lo siento!
CodeFinity

Esto me ayudó con un problema similar y también me mostró una función de Sass que no sabía que existía, ¡salud!
MadSkunk

1

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

También puede hacer esto con JavaScript.


2
¿ if (attr) {Te meterías en problemas? No veo el sentido en el tipo estricto de controles falsos, ya que tanto los falsos como los indefinidos son valores falsos.
Thijs Koerselman

1

Para aquellos que quieren una respuesta tonta como yo

Algo así como pasos como 1, 2, 3

Aquí está lo que hice

Primero crea el marcado HTML

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

Luego, antes de su etiqueta de cuerpo final, agregue este script

Incluí el cuerpo final en el código a continuación como ejemplo

Así que ten cuidado cuando copias

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

0

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";
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.