web-dev-qa-db-fra.com

CSS set background-image par data-image attr

J'ai une sorte d'éléments avec ce modèle:

<div data-image="{imageurl}" ...></div>

Je veux définir ces éléments background-image à data-image. Je teste ce code CSS:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

la bordure s'affiche correctement mais rien ne s'est produit pour le fond Comment puis-je réparer ce code uniquement avec css (pas js ou jq)?

htmlcssurlbackground-imageattr
38
Hossain Khademian

Au moment de l'écriture, le navigateur prend en charge attr() notation sur les propriétés CSS autres que content - comme background-image - est très limité .

De plus, selon spécification CSS niveau 2 , la combinaison de url() et attr() n'est pas valide:
content: url(attr(data-image));.

Il n'y a donc pas de solution CSS multi-navigateur pour atteindre le résultat souhaité. Sauf si l'utilisation de JavaScript est une option:

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute('data-image');
  list[i].style.backgroundImage="url('" + url + "')";
}
div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}
<div data-image="http://placehold.it/100"></div>
31
Hashem Qolami

Dans votre [~ # ~] html [~ # ~] :

<div data-image="path_to_image/image_file.extension" ... ></div>

Dans votre [~ # ~] css [~ # ~] :

div:after {
    background-image : attr(data-image url);
    /* other CSS styling */
}

Problèmes:

Ceci est votre réponse requise. Consultez cette documentation dans w3.org. Mais le problème principal est cela ne fonctionnera pas, pas encore! . Dans de nombreux navigateurs, attr() s'exécute correctement lorsqu'il est utilisé dans l'attribut content: Du codage CSS. Mais en l'utilisant dans d'autres attributs de CSS, cela ne fonctionne pas comme prévu, pas même dans les principaux navigateurs.

Solution :

  • Utilisez des scripts tels que JavaScript ou jQuery .

Références :

Merci :

15
cuSK

Si l'objectif est de pouvoir définir le background-image style d'un élément HTML à partir du document HTML plutôt que la définition CSS, pourquoi ne pas utiliser l'attribut inline style de l'élément HTML?

div[style^='background-image'] {
  width:400px;
  height:225px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  /* background-image is not set here... */
}
<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>

MODIFIER:

Si vous sélectionnez <div> par style n'est pas une option, vous pouvez peut-être lui donner une classe et la sélectionner par nom de classe.

8
Carvo Loco

une alternative intéressante aux attributs data- (ou à l'approche attr() en général) peut être l'utilisation de propriétés personnalisées ( MDN , csswg , css-tricks ).

comme leurs valeurs ne sont pas limitées aux chaînes, nous pouvons transmettre tout type autorisé en tant que valeur de propriété personnalisée!

vous bénéficiez également de la mise à jour de ces propriétés lors de l'exécution, avec l'échange d'une feuille de style.

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}
<div  class="kitten"
      style="--bg-image: url('http://placekitten.com/525/252');">
</div>
2
Eliran Malka