CSS-Set Hintergrund-Bild von Daten-Bild attr

Question

Ich Art von Elementen mit diesem Muster haben:

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

Ich möchte diese Elemente setzen background-image zu data-image. Ich teste diese CSS-Code:

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

Grenze zeigen richtig, aber es ist nichts passiert für Hintergrund Wie kann ich diesen Code zu beheben nur mit CSS (nicht js oder jq)?

Answer 1

Zum Schreiben, die Browser-Unterstützung von attr() notation auf CSS andere Eigenschaften als content - wie background-image - ist very limited.

Außerdem, wie pro CSS level 2 spec, die Kombination von url() und attr() ist nicht gültig:
content: url(attr(data-image));.

Daher gibt es im Moment keine browserübergreifende CSS-Lösung, um das gewünschte Ergebnis zu erzielen. Es sei denn mit Hilfe von JavaScript ist eine Option:

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

In Ihrem HTML:

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

In Ihrem CSS:

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

Probleme:

Dies ist Ihre erforderliche Antwort. Überprüfen Sie diese Dokumentation in w3.org. Aber das Hauptproblem ist es wird nicht funktionieren, noch nicht!. In vielen Browsern wird attr() erfolgreich ausgeführt, wenn es in content: Attribut der CSS-Codierung verwandt wird. Aber in anderen CSS-Attributen funktioniert es nicht wie erwartet, nicht einmal in den wichtigsten Browsern.

Lösung:

• Verwenden Skripte wie JavaScript oder jQuery.

Referenzen:

• W3C attr()
• MDN attr()

Dank:

• Hashem Qolami für die Korrektur meiner Syntax. :)

Answer 3

Wenn das Ziel aus dem HTML-Dokument den background-image Stil eines HTML-Element zu setzen in der Lage ist, anstatt die CSS-Definition, warum nicht die Inline verwendet style Attribut des HTML-Elements?

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:

Wenn durch Stil der <div> Auswahl nicht möglich ist, können Sie in der Lage sein, eine Klasse zu geben, und wählen sie mit Klassennamen.