CSS 3: establecer una imagen de fondo para atributo rel valor

Question

Estoy mirando para fijar el background-image (o incluso hacer que una imagen a través de los pseudo elementos :after o :before) hasta su valor, lo que será una URL, de un atributo rel, pero solo en ciertos casos (esta es una lista de archivos en la nube). Por ejemplo:

HTML:

<div class="icon ${fileExtension}" rel="${fileURL}"></div> 

Sería genial si pudiera hacer algo como esto:

CSS:

.icon.png, 
.icon.jpg, 
.icon.jpeg, 
.icon.bmp, 
.icon.gif { background-image: attr(rel,url); } 

... pero obviamente eso no lo hace funciona, si no me equivoco, la función CSS attr() solo funciona dentro de bloques de pseudo elementos.

Sé que hay formas de hacer esto usando JSP condicional o incluso lógica jQuery, pero me gustaría encontrar una manera ordenada de hacerlo a través de CSS3, ya que de momento solo me preocupan los navegadores modernos .

Además, no quiero establecer explícitamente la imagen de fondo en la URL o crear un elemento <img>, porque de forma predeterminada si el archivo no es una imagen compatible, prefiero mostrar un conjunto predeterminado de iconos.

Answer 1

he decidido ir a la ruta de jQuery, y se utiliza una combinación de @ryanve y @stefanz respuestas Gracias chicos

$(document).ready(function() { 
    $(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) { 
     var bg = 'url(' + $(this).attr("rel") + ')'; 
     $(this).css('background-image', bg); 
    }); 
}); 

creo que esto es relativamente limpio/concisa y funciona bien para mis necesidades. No dude en comentar sobre la eficiencia, la metodología, etc.

Answer 2

He intentado hacer algo con jQuery pero no entiendo exactamente lo que quieres, así que no puedo continuar con mi código. Hasta ahora he hecho solo esto.

editado espero que sea exactamente lo que necesita

$(function(){ 
    var terms = new Array('png','jpg','jpeg','bmp','gif'); 

    $('.icon').each(function(){ 
     var t = $(this), 
      rel = t.attr('rel'), 
      cls = t.attr('class'); 

     cls = cls.split(' '); 

     for (var i=0; i < terms.length; i++) { 
      if (terms[i] == cls[1]) { 
       t.css('background-image','url('+rel+')'); 
      } 
     } 
    }); 
}); 

si me puede dar un mejor ejemplo, a undestand exactamente lo que quiere, espero que alguien de aquí será capaz de resolver su problema.

Regards, Stefan

Answer 3

Usando

.icon:after{ content: ""attr(rel)""; } 

muestra el valor rel como texto.

Una solución jQuery es agregar el background-image (tomado del valor rel) como en línea CSS:

jQuery(function($) { 
    $('.icon').each(function() { 
     var $this = $(this); 
     $this.css('background-image', 'url(' + $this.attr('rel') + ')'); 
    }); 
});