tamaño - mostrar imagen en html

CSS establece imagen de fondo por atributos de imagen de datos

Question

Tengo una especie de elementos con este patrón:

<div data-image="{imageurl}" ...></div>

Quiero establecer estos elementos background-image en data-image . Probé este código CSS:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

border show correctamente pero no pasó nada para el fondo ¿Cómo puedo arreglar este código solo con css (no js o jq)?

Answer 1

A partir de la redacción, el soporte del navegador de la notación attr() en las propiedades de CSS distintas del content , como background-image , es muy limitado .

Además, según la especificación de nivel 2 de CSS , la combinación de url() y attr() no es válida:
content: url(attr(data-image)); .

Por lo tanto, no hay una solución CSS de navegador cruzado en este momento para lograr el resultado deseado. A menos que el uso de JavaScript sea una opción:

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute(''data-image'');
  list[i].style.backgroundImage="url(''" + url + "'')";
}

div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}

<div data-image="http://placehold.it/100"></div>

Answer 2

En tu HTML :

<div data-image="path_to_image/image_file.extension" ... ></div>

En tu CSS :

div:after {
    background-image : attr(data-image url);
    /* other CSS styling */
}

Problemas:

Esta es su respuesta requerida. Verifique esta documentación en w3.org . ¡Pero el problema principal es que no funcionará, todavía no! . En muchos navegadores, attr() ejecuta correctamente cuando se usa en content: atributo de la codificación CSS. Pero al usarlo en otros atributos de CSS, no funciona como se esperaba, ni siquiera en los principales navegadores.

Solución :

• Use scripts como JavaScript o jQuery .

Referencias

• W3C attr ()
• MDN attr ()

Gracias

• por corregir mi sintaxis. :)

Answer 3

Si el objetivo es poder establecer el estilo de la background-image de un elemento HTML desde el documento HTML en lugar de la definición de CSS, ¿por qué no utilizar el atributo de style línea del elemento HTML?

div[style^=''background-image''] {
  width:400px;
  height:225px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  /* background-image is not set here... */
}

<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>

EDITAR:

Si seleccionar el <div> por estilo no es una opción, puede darle una clase y seleccionarla por nombre de clase.