CSS set background-image-dati dell'immagine attr

Question

ho sorta di elementi con questo modello:

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

voglio impostare questi elementi background-image a data-image. I test di questo codice CSS:

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

Mostra bordo correttamente, ma non è successo niente per lo sfondo Come può posso risolvere questo codice solo con i CSS (non js o JQ)?

Answer 1

Come della scrittura, il supporto del browser di attr() notation sulle proprietà CSS diversi content - come background-image - è very limited.

Inoltre, secondo CSS level 2 spec, combinando url() e attr() non è valida:
content: url(attr(data-image));.

Quindi al momento non esiste una soluzione CSS cross-browser per ottenere il risultato desiderato. A meno che l'uso di JavaScript è un'opzione:

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

Nella tua HTML:

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

Nel vostro CSS:

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

Problemi:

Questa è la risposta richiesta. Controllare questa documentazione in w3.org. Ma il problema principale è non funzionerà, non ancora!. In molti browser, attr() viene eseguito correttamente quando viene utilizzato nell'attributo content: della codifica CSS. Ma usandolo in altri attributi del CSS, non funziona come previsto, nemmeno nei principali browser.

Soluzione:

• Utilizzare gli script come JavaScript o jQuery.

Riferimenti:

• W3C attr()
• MDN attr()

Grazie:

• Hashem Qolami per correggere la mia sintassi. :)

Answer 3

Se l'obiettivo è quello di poter impostare lo stile background-image di un elemento HTML dall'interno del documento HTML, piuttosto che la definizione CSS, perché non utilizzare la linea style attributo dell'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>

EDIT:

Se la selezione del <div> dallo stile non è un'opzione, si può essere in grado di dargli una lezione e selezionarlo dal nome della classe.