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

Question

Je suis en train d'utiliser l' :before sélecteur de placer une image sur une autre image, mais je trouve qu'il n'a tout simplement pas de travail à la place d'une image avant de l' img élément, seulement quelques autre élément. Plus précisément, mes styles sont:

.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:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

mais ce n'est pas:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

Je peux utiliser un div ou p élément au lieu de celui - span, et le navigateur correctement les superpositions de mon image sur l'image dans l' img élément, mais si j'applique la superposition de classe à l' img lui-même, il ne fonctionne pas.

Je voudrais faire ce travail parce que les extra - span me choque, mais le plus important, j'ai environ 100 billets de blog que j'aimerais modifier, et je peux le faire en une seule fois, si seulement je pouvais modifier la feuille de style, mais si je dois revenir en arrière et ajouter un extra - span élément de l'entre - a et img éléments, ce sera beaucoup plus de travail.

Answer 1

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('<img src="..." />');

});
 

Answer 2

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é. Comme les éléments d'image ne contiennent pas de texte ou ont des descendants, ni img:before ou img:after ne vous seront utiles. C'est également le cas des éléments tels que <br> et <hr> pour la même raison.

Answer 3

J'ai trouvé une façon de faire ce travail en pur css:

La je suis tout simplement faux de contenu-méthode

un pur CSS méthode pour activer img:après.

Vous pouvez consulter le CodePen: je suis tout simplement faux de contenu ou de voir la source.

Source

HTML

<img
    alt="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);
}

Prise en charge du navigateur

✓ Chrome 10+

✓ Firefox 11+

✓ L'opéra de 9,8+

✓ Safari

Pas de support

⊗ Internet Explorer 8 / 9

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

Answer 4

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

Le HTML comme suit:

 <div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
 

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, consultez 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».