À l'aide de données HTML-attribut pour définir CSS background-image url

J'ai l'intention de construire une coutume galerie photo pour un ami et je sais exactement comment je vais produire le HTML, mais je suis confronté à un petit problème avec le CSS.
(Je préfère ne pas avoir la page style de compter sur jQuery si possible)

Ma question concerne:

Data-Attribute en HTML

Background-image en CSS

J'utilise ce format pour mon html vignettes:

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

et je suppose que le CSS devrait ressembler à quelque chose comme ceci:

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

Mon objectif est de prendre le data-image-src de la div.thumb dans mon fichier HTML et l'utiliser pour chaque div.thumb(s) background-image source dans mon fichier CSS.

Ici est un Codepen Stylo afin d'obtenir une dynamique exemple de ce que je suis à la recherche de:

http://codepen.io/thestevekelzer/pen/rEDJv

InformationsquelleAutor StephenKelzer | 2013-03-31
  1. 57

    Vous finirez par être en mesure d'utiliser

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

    mais qui n'est pas mis en œuvre n'importe où encore à ma connaissance. Ci-dessus, url est une option de "type-ou-unité" paramètre attr(). Voir https://drafts.csswg.org/css-values/#attr-notation.

    • Quand vous dites éventuellement, est-il un moyen de savoir QUAND ce sera à partir du site W3 à peu près?
    • Estimation aléatoire sans rien savoir de précis sur l'état d'exécution est de 1 à 2 ans avant d'être disponible dans tous les navigateur pistes.
    • la première année est plus, toujours plein d'espoir.
    • Pas sur le chrome de la feuille de route pour 2016 🙁 #246571
    • Vous pouvez l'utiliser pour les pseudo-éléments: caniuse.com/#feat=css-gencontent
    • Oui, nous le savons. Cette question est à propos de quelque chose d'autre.
    • caniuse.com/#feat=css3-attr À ce jour, aucun navigateur n'a mis en œuvre cette fonctionnalité encore.
    • Toujours rien 😐
    • il dit seulement pour content de la propriété. Comme par caniuse.com/#feat=css3-attr attr() sur toute propriété CSS n'est pas encore supporté.

    InformationsquelleAutor
  2. 13

    Il n'est pas le plus pratique pour mélanger le contenu avec le style, mais une solution pourrait être

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

    Vous aurez besoin d'un peu de JavaScript pour que:

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

    Étirable dans <script> tags en bas, juste avant la </body> tag ou enveloppez-les dans une fonction que l'on appel une fois la page chargée.

    InformationsquelleAutor Jonathan
  4. 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+')');
  }

});

    Démo sur JSFiddle

    Vous pouvez le faire aussi avec du JavaScript.

    • Serait if (attr) { obtenir en difficulté? Je ne vois pas l'intérêt dans le strict typeof et les contrôles faux, puisque à la fois fausse et undefined sont falsy valeurs.
    InformationsquelleAutor Fritz
  5. 1

    Comment sur l'utilisation de certaines Sass? Voici ce que j'ai fait pour obtenir quelque chose comme ceci (mais notez que vous devez vous créer un Style de liste pour chacun des attributs data -). 

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

    Essentiellement, vous liste l'ensemble de vos données les valeurs d'attribut. Ensuite, l'utilisation de Sass @chacune de parcourir et de sélectionner tous les attributs data-dans le code HTML. Ensuite, mettre dans la variable d'itérateur et ont-il correspondre à un nom de fichier.

    De toute façon, comme je l'ai dit, vous devez faire la liste de toutes les valeurs, puis assurez-vous que vos noms de fichiers intégrer les valeurs dans votre liste.

    • Cela vous oblige à une liste de valeurs dans vos styles de déclaration. Quand j'ai posé cette question, j'ai été chercher le balisage lecteur ce que les styles affiché à la place de l'autre manière autour.
    • Ouais, c'est le tuf. Désolé!
    • Cela m'a aidé avec un problème similaire, et m'a aussi montré une Sass fonctionnalité que je ne savais pas existé, cheers!
    InformationsquelleAutor CodeFinity
  6. 1

    Si vous voulais le garder avec HTML et CSS, vous pouvez utiliser les CSS Variables.
    Gardez à l'esprit, css variables ne sont pas pris en charge dans IE.

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

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

    InformationsquelleAutor Bruce Brotherton
  7. 0

    CODE HTML

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

    CODE JS 

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

    Pour ceux qui veulent abrutir réponse comme moi

    Quelque chose comme la façon dont les étapes 1, 2, 3

    Ici, c'est ce que j'ai fait

    D'abord créer le code HTML

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

    Alors, avant la clôture de votre balise body, ajouter ce script

    J'ai inclus à la fin du corps sur le code ci-dessous un exemple

    Donc attention lorsque vous copiez

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