Verwenden des HTML-Datenattributs zum Festlegen der CSS-Hintergrundbild-URL

79

Ich habe vor, eine benutzerdefinierte Fotogalerie für einen Freund zu erstellen, und ich weiß genau, wie ich den HTML-Code erstellen werde. Ich habe jedoch ein kleines Problem mit dem CSS.
(Ich würde es vorziehen, wenn das Seiten-Styling nicht auf jQuery basiert, wenn möglich)


Meine Frage betrifft:
Data-Attributein HTML
Background-imagein CSS
Ich verwende dieses Format für meine HTML-Miniaturansichten:
<div class="thumb" data-image-src="images/img.jpg"></div>

und ich gehe davon aus, dass das CSS ungefähr so ​​aussehen sollte:

.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*/
}


Mein Ziel ist das nehmen data-image-srcvon dem div.thumbin meiner HTML - Datei und es für jede verwenden div.thumb(n) background-imageQuelle in meiner CSS - Datei.

Hier ist ein Codepen-Stift, um ein dynamisches Beispiel für das zu erhalten, wonach ich suche:
http://codepen.io/thestevekelzer/pen/rEDJv

StephenKelzer
quelle

Antworten:

64

Sie werden schließlich in der Lage sein, zu verwenden

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

aber das ist meines wissens noch nirgends umgesetzt. Oben urlist ein optionaler "Typ-oder-Einheit" -Parameter zu attr(). Siehe https://drafts.csswg.org/css-values/#attr-notation .

Jeffrey Bosboom
quelle
4
Wenn Sie irgendwann sagen , gibt es eine Möglichkeit zu wissen, WANN das ungefähr von der W3-Site kommt?
StephenKelzer
5
Zufällige Vermutungen ohne Kenntnis des spezifischen Implementierungsstatus dauern 1-2 Jahre, bis sie in allen Browserspuren verfügbar sind.
5
@ Torazaburo Jahr eins ist vorbei, immer noch voller Hoffnung.
Clemens Himmer
3
Nicht auf der Chrom-Roadmap für 2016 :( # 246571
Felipe
2
caniuse.com/#feat=css3-attr Bisher hat noch kein Browser diese Funktion implementiert.
Saawsann
17

Wenn Sie es nur mit HTML und CSS behalten möchten, können Sie CSS-Variablen verwenden. Beachten Sie, dass CSS-Variablen im IE nicht unterstützt werden .

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

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

Bruce Brotherton
quelle
2
Dies ist wahrscheinlich die beste Antwort in diesem Moment. Kein Javascript ist immer gut.
Abdalla Arbab
+1. Dies ist eine flexiblere Lösung, als das Bild wie in einer anderen Antwort unten direkt inline hinzuzufügen, da Sie mehrere Bildpfade für beispielsweise mehrere Auflösungen deklarieren und dann in Ihrem CSS-Code entscheiden können, welches Bild für welche Auflösung geladen werden soll.
Sumit
16

Es ist nicht empfehlenswert, Inhalte mit Stil zu verwechseln, aber eine Lösung könnte sein

<div class="thumb" style="background-image: url('images/img.jpg')"></div>
Kevin Johne
quelle
6

Dafür benötigen Sie ein wenig JavaScript:

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

Wickeln Sie das in <script>Tags unten kurz vor dem </body>Tag ein oder in eine Funktion, die Sie nach dem Laden der Seite aufrufen.

Jonathan
quelle
2

Wie wäre es mit etwas Sass? Hier ist, was ich getan habe, um so etwas zu erreichen (obwohl zu beachten ist, dass Sie für jedes der Datenattribute eine Sass-Liste erstellen müssen).

/*
  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
  }
}

Im Wesentlichen listen Sie alle Ihre Datenattributwerte auf. Verwenden Sie dann Sass @each, um alle Datenattribute im HTML-Code zu durchlaufen und auszuwählen. Bringen Sie dann die Iteratorvariable ein und lassen Sie sie mit einem Dateinamen übereinstimmen.

Wie gesagt, Sie müssen alle Werte auflisten und dann sicherstellen, dass Ihre Dateinamen die Werte in Ihrer Liste enthalten.

CodeFinity
quelle
1
Dies setzt voraus, dass Ihre Stildeklaration eine bekannte Werteliste enthält. Als ich diese Frage stellte, versuchte ich, das Markup-Laufwerk so zu gestalten, dass die Stile angezeigt werden, anstatt umgekehrt.
StephenKelzer
1
Ja, das ist Tuff. Es tut uns leid!
CodeFinity
Dies half mir bei einem ähnlichen Problem und zeigte mir auch eine Sass-Funktion, von der ich nicht wusste, dass sie existiert, Prost!
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+')');
  }

});

Demo auf JSFiddle

Sie können dies auch mit JavaScript tun.

Fritz
quelle
2
Würden if (attr) {Sie in Schwierigkeiten geraten? Ich sehe den Punkt nicht in der strengen Art von und falschen Prüfungen, da sowohl falsch als auch undefiniert falsche Werte sind.
Thijs Koerselman
1

Für diejenigen, die eine dumme Antwort wie ich wollen

So etwas wie Schritte wie 1, 2, 3

Hier ist es was ich getan habe

Erstellen Sie zuerst das HTML-Markup

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

Fügen Sie dann vor Ihrem Endkörper-Tag dieses Skript hinzu

Ich habe den Endkörper als Beispiel in den folgenden Code aufgenommen

Seien Sie also vorsichtig, wenn Sie kopieren

<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>
lupoll88
quelle
0

HTML QUELLTEXT

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

JS CODE

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";
Nevil Saul Blemuss
quelle