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-Attribute
in HTML Background-image
in 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-src
von dem div.thumb
in meiner HTML - Datei und es für jede verwenden div.thumb
(n) background-image
Quelle 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
css
background-image
custom-data-attribute
StephenKelzer
quelle
quelle
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
quelle
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>
quelle
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.quelle
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.
quelle
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.
quelle
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.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>
quelle
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";
quelle