web-dev-qa-db-fra.com

Définir l'attribut src d'un <img> dans CSS

J'ai besoin de définir l'attribut src d'un <img> dans CSS. Est-il possible de spécifier cet attribut?

cssattributesimage
99
Massimo Ugues
#divID {
    background-image: url("http://imageurlhere.com");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}
72
Ali Poder

juste comme img tag est un élément de contenu

img {
    content:url(http://example.com/image.png);
}
165
Marinos

Non il n'y en a pas. Vous pouvez spécifier une image d'arrière-plan mais c'est pas la même chose.

47
cletus

CSS n'est pas utilisé pour définir des valeurs pour les attributs d'élément DOM, javascript conviendrait mieux pour cela.

11
Darin Dimitrov

N ° Le plus proche que vous pouvez obtenir est la définition d'une image d'arrière-plan:

<div id="myimage"></div>

#myimage {
  width: 20px;
  height: 20px;
  background: white url(myimage.gif) no-repeat;
}
8
RoToRa

Après avoir essayé ces solutions, je n’étais toujours pas satisfait mais j’ai trouvé une solution dans ce article et cela fonctionne sous Chrome, Firefox, Opera, Safari, IE8 +

#divId {

  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */

}
5
Eric

Ils ont raison. IMG est un élément de contenu et CSS concerne le design. Mais qu'en est-il lorsque vous utilisez des éléments de contenu ou des propriétés à des fins de conception? J'ai des IMG sur mes pages Web qui doivent changer si je change de style (le CSS).

C'est une solution pour définir la présentation IMG (pas vraiment l'image) en style CSS.
1: créez un gif ou png transparent 1x1.
2: Attribuez la propriété "src" de IMG à cette image.
3: Définissez la présentation finale avec "background-image" dans le style CSS.

Il fonctionne comme un charme :)

2
Frank