Est-ce que: avant de ne pas travailler sur les éléments img?

J’essaie d’utiliser le sélecteur :before pour placer une image sur une autre image, mais je trouve que cela ne fonctionne tout simplement pas pour placer une image avant un élément img , seulement un autre élément. Plus précisément, mes styles sont les suivants:

 .container { position: relative; display: block; } .overlay:before { content: url(images/[someimage].png); position: absolute; left:-20px; top: -20px; } 

et je trouve que cela fonctionne bien:

     

mais cela ne veut pas:

    

Je peux utiliser un élément div ou p au lieu de cet span et le navigateur superpose correctement mon image sur l’image dans l’élément img , mais si j’applique la classe de superposition à l’ img elle-même, cela ne fonctionne pas.

J’aimerais que cela fonctionne parce que cette span supplémentaire me choque, mais surtout, j’ai environ 100 articles de blog que je voudrais modifier, et je peux le faire en une seule fois si je pouvais simplement modifier la feuille de style. , mais si je dois revenir en arrière et append un élément span supplémentaire entre les éléments a et img , ce sera beaucoup plus de travail.

Malheureusement, la plupart des navigateurs ne prennent pas en charge :after ou :before sur les balises img.

http://lildude.co.uk/after-css-property-for-img-tag

Cependant, il est possible que vous accomplissiez ce dont vous avez besoin avec JavaScript / jQuery. Découvrez ce violon:

http://jsfiddle.net/xixonia/ahnGT/

 $(function() { $('.target').after(''); }); 

Modifier :

Pour la raison pour laquelle ce n’est pas pris en charge, consultez la réponse de coreyward .

Les pseudo-sélecteurs avant et après n’insèrent pas d’éléments HTML – ils insèrent du texte avant ou après le contenu existant de l’élément ciblé. Parce que les éléments d’image ne contiennent pas de texte ou ont des descendants, ni img:before ni img:after ne vous seront utiles. C’est également le cas pour des éléments tels que
et


pour la même raison.

J’ai trouvé un moyen de faire ce travail en pure css:

Le je suis juste faux contenu -méthode

une méthode CSS pure pour activer img: after.

Vous pouvez vérifier le CodePen: je suis juste du contenu faux ou voir la source .

La source

HTML

 You are watching the ~ I'm just fake content ~ method 

CSS

 img { /* hide the default image */ height:0; width:0; /* hide fake content */ font-size:0; color:transparent; /* enable absolute position for pseudo elements */ position:relative; /* and this is just fake content */ content:"I'm just fake content"; } /* initial absolute position */ img:before, img:after { position:absolute; top:0; left:0; } /* img:before - chrome & others */ img:before { content:url(http://placekitten.com/g/250/250); } /* img:before - firefox */ body:not(:-moz-handler-blocked) img:before { padding:125px; background:url(http://placekitten.com/g/250/250) no-repeat; } /* img:after */ img:after { /* width of img:before */ left:250px; content:url(http://lorempixel.com/350/200/city/1); } 

Support du navigateur

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Pas de support

Explorer Internet Explorer 8/9

S’il vous plaît tester dans d’autres navigateurs

Voici une autre solution utilisant un conteneur div pour img en utilisant :hover::after pour obtenir l’effet.

Le HTML comme suit:

 

Le CSS comme suit:

 #img_container { margin:0; position:relative; } #img_container:hover::after { content:''; display:block; position:absolute; width:300px; height:300px; background:url(''); z-index:1; top:0; } 

Pour le voir en action, découvrez le violon que j’ai créé. Juste pour que vous sachiez que ceci est compatible avec tous les navigateurs et qu’il n’est pas nécessaire de tromper le code avec du «faux contenu».

Je pense que la meilleure façon de voir pourquoi cela ne fonctionne pas est que: avant et après: insérer leur contenu avant ou après le contenu de la balise que vous leur appliquez. Cela fonctionne donc avec des divs ou des spans (ou la plupart des autres tags), car vous pouvez y placer du contenu.

 
:before Content :after

Cependant, un img est une balise autonome à fermeture automatique, et comme il n’a pas de balise de fermeture séparée, vous ne pouvez rien y mettre. (Cela devrait ressembler à Content , mais cela ne marche pas.)

Je sais que c’est un vieux sujet, mais il apparaît d’abord sur Google, alors j’espère que cela aidera les autres à apprendre.

J’ai essayé et trouvé une méthode plus simple pour le faire. Voici le HTML:

   

Ce que j’ai fait était de placer une

vide après ma balise image. Je vais maintenant utiliser p :: avant pour montrer l’image et la positionner selon mes besoins. Voici le CSS:

 #empty_para { display:inline; font-size:40; background:orange; border:2px solid red; position:relative; top:-400px; left:100px; } #empty_para::before { content: url('messages.png'); } 

Essayez-le