html - 带有：after伪元素的img标签上的奇怪行为？

Question

昨天我问了一个关于用 CSS3 应用不均匀阴影的问题，最终的结果是这样的（这让我印象深刻！）

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

我似乎无法弄清楚为什么会发生这种情况，我尝试消除 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/

这里有一个相关的问题

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

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;
}

演示