Utilisation de l'attribut HTML data pour définir l'url de l'image d'arrière-plan CSS

Question

J'ai l'intention de créer une galerie de photos personnalisée pour un ami et je sais exactement comment je vais produire le HTML, mais je rencontre un petit problème avec le CSS.
(Je préférerais que le style de la page ne dépende pas de jQuery, si possible).

---

Ma question est la suivante :
Data-Attribute en HTML
Background-image en CSS

J'utilise ce format pour mes vignettes html :
<div class="thumb" data-image-src="images/img.jpg"></div>

et je suppose que le CSS doit ressembler à quelque chose comme ça :

.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 but 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 dans mon fichier CSS.

Voici un Codepen Pen afin d'obtenir un exemple dynamique de ce que je recherche :
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

Vous pourrez éventuellement utiliser

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

mais cela n'est pas encore implémenté nulle part à ma connaissance. Dans ce qui précède, url est un paramètre facultatif de type ou d'unité pour l'utilisateur. attr() . Voir https://drafts.csswg.org/css-values/#attr-notation .

Answer 2

Si vous souhaitez vous en tenir au HTML et au CSS, vous pouvez utiliser les variables CSS. N'oubliez pas, les variables css ne sont pas prises en charge par IE .

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

.thumb {
    background-image: var(--background);
}

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

Answer 3

Il n'est pas recommandé de mélanger le contenu et le style, mais une solution pourrait être la suivante

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

Answer 4

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

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

Enveloppez cela dans <script> en bas de page, juste avant les balises </body> ou dans une fonction que vous appelez une fois la page chargée.

Answer 5

Et si vous utilisiez un peu de Sass ? Voici ce que j'ai fait pour obtenir quelque chose comme ça (mais notez que vous devez créer une liste Sass pour chacun des attributs de données).

/*
  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 dressez la liste de toutes les valeurs des attributs de vos données. Puis utilisez Sass @each pour itérer et sélectionner tous les attributs de données dans le HTML. Ensuite, faites intervenir la variable iterator et faites-la correspondre à un nom de fichier.

Quoi qu'il en soit, comme je l'ai dit, vous devez dresser la liste de toutes les valeurs, puis vous assurer que vos noms de fichiers incorporent les valeurs de votre liste.