img标签上的奇怪行为：在伪元素之后？

Question

昨天我问了一个关于应用uneven shadow with CSS3的问题，最终结果是this（我对此印象非常深刻！）

不幸的是，当我开始尝试在图像上使用它时，我最终得到了this（阴影根本没有出现）

我似乎无法弄清楚为什么会发生这种情况，我已经尝试删除alt文本（这没有帮助）但是给img一个空白的src属性修复了它（显然我不想这样做）这！）

我能想到的是它可能与content:"" css有关吗？我已经尝试搞乱但却无处可去。

我可以使用div来包装img，然后给这个类，但最终我想避免这个。

Answer 1

所以只需将图像置于这样一个div中。这可以接受吗？像这样：

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

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

有一个相关问题here

显然它与“之前”和“之后”伪类有关。

Answer 2

为什么不使用div

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

并改变css，如

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

DEMO