Comment remplacer une image HTML à l'aide de CSS

Question

J'ai mon code actuel :

#content img[src="/img/test.gif"] { 
    background-image:url(dark-img.png) !important;
}

D'après ce que j'ai compris !important; remplace les valeurs existantes ?

Pourquoi cela ne remplace-t-il pas l'image HTML actuellement en place ? L'arrière-plan apparaît, derrière l'image HTML.

Je le veux devant de l'image HTML, est-ce possible en utilisant CSS ou JS ?

Edit : Pour ce que ça vaut, je fais un userscript qui va modifier le style existant du site. Je n'ai donc pas d'accès direct à l'image HTML.

Answer 1

Vous n'avez pas besoin de javascript pour le remplacement d'images ! Tant que vous pouvez identifier l'image par un sélecteur CSS, vous pouvez utiliser CSS pour faire l'affaire.

Voir la solution ici http://www.audenaerde.org/csstricks.html#imagereplacecss

Answer 2

Voici le code en utilisant uniquement le langage css :

<img src="tiger.jpg" 
     style="padding: 150px 200px 0px 0px; 
            background: url('butterfly.jpg'); 
            background-size:auto; 
            width:0px; 
            height: 0px;">

• fixe la taille de l'image à 0x0,
• ajoute une bordure de la taille souhaitée (150x200), et
• utilise votre image comme image de fond à remplir.

Si vous upvotez cette réponse, donnez Réponse de @RobAu un upvote, aussi.

Answer 3

En background-image lorsqu'elle est appliquée à une image, fait référence à (roulement de tambour ... ) l'image d'arrière-plan de l'image. Elle sera toujours derrière l'image.

Si vous souhaitez que l'image apparaisse dans avant de l'image, vous devrez utiliser deux images ou un autre conteneur avec une image d'arrière-plan qui couvre la première image.

Par ailleurs, il n'est pas recommandé de s'appuyer sur les données de la !important pour les remplacer. Il peut également être inefficace car 1) il ne peut pas remplacer les déclarations dans l'attribut de style d'un élément, et 2) il ne fonctionne que s'il est puede en fonction du balisage et du CSS actuel. Dans votre cas, tout ce que vous avez fait, tout ce que vous avez soufflé, tout ce que vous avez fait, tout ce que vous avez fait, tout ce que vous avez fait !important ne fera pas faire à une image quelque chose qu'elle ne peut pas faire.

Answer 4

Le remplacement d'une image en CSS peut se faire de plusieurs manières. Chacune d'entre elles présente des inconvénients (sémantique, référencement, compatibilité avec les navigateurs,...).

Sur ce lien, 9 ( neuf ! ) les différentes techniques sont discutées de façon très pertinente :

http://css-tricks.com/css-image-replacement/

Si vous êtes intéressé par les css en général, le site entier vaut la peine d'être consulté.

Answer 5

J'ai répondu à une question similaire dans une autre page SO

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

Cela permet de masquer l'image et de réduire l'arrière-plan. Oh, c'est un peu compliqué, mais si vous voulez une image avec un texte alt et un arrière-plan qui peut s'adapter sans utiliser le Javascript ?