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

Utilisez votre 'userscript' pour modifier la valeur de l'attribut 'src'.

S'il y a un identifiant, vous pouvez le faire :

document.getElementById('TheImgId').src = 'yournewimagesrc';

S'il n'y a pas d'identification :

var imgElements = document.getElementsByTagName('img');

Faire l'itération de imgElements . Lorsque son src correspond à vos critères, changez la valeur avec la vôtre, faites une pause.

Mise à jour :

Javascript :

<script language="javascript">
    function ChangeImageSrc(oldSrc, newSrc) {
        var imgElements = document.getElementsByTagName('img');
        for (i = 0; i < imgElements.length; i++){
            if (imgElements[i].src == oldSrc){
                imgElements[i].src = newSrc;
                break;
            }
        }
    }
</script>

HTML :

<img src="http://i.stack.imgur.com/eu757.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
    setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);
</script>

Avant-première :

La première image sera remplacée après 5 secondes. Essayer Démonstration en direct .

Answer 2

Vous devrez également placer la première image en tant qu'image d'arrière-plan. Vous pourrez ensuite la remplacer. Vous pourriez faire un fichier css "standard" pour le site, et chaque utilisateur a le sien, où il peut remplacer ce qu'il veut.

Answer 3

Je suis d'accord avec toutes les réponses données ici, mais j'ai pensé qu'il fallait souligner que les navigateurs tels que IE n'apprécieront pas l'image img[src="/img/test.gif"] comme moyen de sélection de l'image. il faudrait une classe ou un identifiant.

Answer 4

Les images affichées dans les balises sont au premier plan de l'élément, et non à l'arrière-plan, de sorte que la définition d'une image d'arrière-plan dans une balise ne remplacera pas l'image ; elle apparaîtra simplement derrière l'image principale, comme vous le voyez.

Ce que vous voulez faire, c'est remplacer l'image. Voici les options qui s'offrent à vous :

• Commencez par un élément avec une image de fond, et non une balise. La modification de l'image d'arrière-plan en CSS la remplacera.

• Commencez par une balise, mais utilisez Javascript pour modifier l'attribut src. (ce n'est pas possible en CSS, mais c'est assez simple en JS)

EDITAR:

Au vu de votre modification de la question, je suggérerais l'option 2 - utiliser Javascript pour modifier l'attribut src. C'est assez simple ; quelque chose comme ceci ferait l'affaire :

document.getElementById('myimgelement').src='/newgraphic.jpg';

Answer 5

Vous devriez être en mesure de le remplacer en faisant quelque chose comme :

.image {
    content: url('https://picsum.photos/seed/picsum/400');
    width: 200px;
    height: 200px;
}

Malheureusement, il semble que cela ne fonctionne pas dans Firefox :(