webentwicklung-frage-antwort-db.com.de

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

Ich plane, eine benutzerdefinierte Fotogalerie für einen Freund zu erstellen, und ich weiß genau, wie ich HTML erstellen werde. Allerdings habe ich ein kleines Problem mit der CSS.
(Ich würde es vorziehen, wenn das Seiten-Styling möglichst nicht auf jQuery angewiesen ist.)

Meine Frage betrifft:
Data-Attribute in HTML
Background-image in CSS
Ich verwende dieses Format für meine HTML-Miniaturbilder:
<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 es, den data-image-src aus dem div.thumb in meiner HTML-Datei zu entnehmen und für jeden div.thumb_ (s) background-image-Quellcode in meiner CSS-Datei zu verwenden.

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

css3background-imagecustom-data-attribute
56
StephenKelzer

Sie können schließlich verwenden

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

aber das ist meines Wissens noch nirgendwo implementiert. Im obigen Beispiel ist url ein optionaler "type-or-unit" -Parameter für attr(). Siehe https://drafts.csswg.org/css-values/#attr-notation .

54
user663031

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

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

Sie benötigen dazu ein kleines 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 diese in <script>-Tags unten vor dem </body>-Tag ein, oder wickeln Sie eine Funktion ein, die Sie nach dem Laden der Seite aufrufen.

6
Jonathan

Wenn Sie nur HTML und CSS verwenden möchten, können Sie CSS-Variablen verwenden. Denken Sie daran, dass CSS-Variablen in 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

1
Bruce Brotherton

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

Das könnte man auch mit JavaScript machen.

1
Fritz

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

So etwas wie Schritte als 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 dieses Skript dann vor dem Bodytag hinzu

Ich habe den Endekörper als Beispiel in den folgenden Code eingefügt

Seien Sie beim Kopieren also vorsichtig

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

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

Wie wäre es mit einem Sass? Folgendes habe ich getan, um so etwas zu erreichen (obwohl Sie für jedes Datenattribut 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 Iterator-Variable ein und lassen Sie sie mit einem Dateinamen übereinstimmen.

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

0
CodeFinity