web-dev-qa-db-fra.com

Utilisation de l'attribut HTML data pour définir l'URL de l'image de fond CSS

Je prévois de créer une galerie de photos personnalisée pour un ami et je sais exactement comment je vais produire le code HTML, mais je rencontre un petit problème avec le CSS.
(Je préférerais que le style des pages ne repose pas sur jQuery si possible)

Ma question concerne:
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 devrait ressembler à 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 du div.thumb de mon fichier HTML et de l’utiliser pour chaque source div.thumb (s) background-image de mon fichier CSS.

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

css3background-imagecustom-data-attribute
56
StephenKelzer

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 "type-or-unit" à attr(). Voir https://drafts.csswg.org/css-values/#attr-notation .

54
user663031

Il n’est pas recommandé de mélanger le contenu avec style, mais une solution pourrait être

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

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

Enroulez cela dans les balises <script> en bas juste avant la balise </body> ou insérez une fonction que vous appelez une fois la page chargée.

6
Jonathan

Si vous voulez le conserver uniquement avec HTML et CSS, vous pouvez utiliser des variables CSS. N'oubliez pas que les variables css ne sont pas prises 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

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

});

Démo sur JSFiddle

Vous pouvez le faire aussi avec JavaScript.

1
Fritz

Pour ceux qui veulent un muet répondre comme moi

Quelque chose comme comment faire les pas en 1, 2, 3

Ici c'est ce que j'ai fait

Commencez par créer le balisage HTML

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

Ensuite, avant votre balise de corps de fin, ajoutez ce script

J'ai inclus le corps de fin sur le code ci-dessous à titre d'exemple

Alors attention quand 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>
0
lupoll88

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

Que diriez-vous d'utiliser du Sass? Voici ce que j'ai fait pour obtenir quelque chose comme ceci (bien noter 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 listez toutes vos valeurs d'attribut de données. Ensuite, utilisez Sass @each pour parcourir et sélectionner tous les attributs de données dans le code HTML. Ensuite, apportez la variable itérateur et faites-la correspondre à un nom de fichier.

Quoi qu'il en soit, comme je l'ai dit, vous devez répertorier toutes les valeurs, puis assurez-vous que vos noms de fichiers intègrent ces valeurs dans votre liste.

0
CodeFinity