Comportement étrange sur img tag avec: après pseudo-élément?

Question

j'ai posé une question hier à propos de l'application d'un uneven shadow with CSS3, en fin de compte le résultat final était this (que je suis vraiment impressionné par!)

Malheureusement, quand je commencé à essayer de l'utiliser sur les images, je me retrouve avec this (la l'ombre n'apparaît pas du tout)

Je n'arrive pas à comprendre pourquoi cela se produit, j'ai essayé d'éliminer le texte alt (ce qui ne m'aide pas) mais en donnant à l'img un attribut src vide le corrige (évidemment, bien que je ne veux pas faire cela!)

Tout ce que je peux penser est que cela pourrait être quelque chose à voir avec le content:"" css? J'ai essayé de jouer avec mais je n'ai rien.

Je pourrais utiliser un div pour envelopper le img, et donner à la classe, mais finalement je veux éviter cela.

Answer 1

Donc, il suffit de mettre l'image à l'intérieur d'un tel div. Est-ce que ce sera acceptable? Comme ceci:

<div class="container"><img src="http://intelligentpenguin.co.uk/blank_story.gif" alt="" /></div> 

http://jsfiddle.net/qUpZX/4/

Il y a une question connexe here

Apparemment, il a à voir avec les "avant" et "après" pseudo-classes.

Answer 2

Pourquoi ne vous utilisez un div autour

<div class="container"> 
    <img src="http://intelligentpenguin.co.uk/blank_story.gif " alt="" /> 
</div>​ 

et le changement css comme

.container img{ 
    width: 300px; 
    height: 200px; 
    margin: 50px; 
    background-color: #eeeeee; 
    z-index: 1; 
} 

DEMO