图像不尊重 z-index 并覆盖伪元素的阴影答案

【问题标题】：image dishonors z-index and overlays shadow of pseudo-element图像不尊重 z-index 并覆盖伪元素的阴影
【发布时间】：2012-08-11 09:34:33
【问题描述】：

我想用伪元素 ::after 和 ::before 投射额外的阴影，以创建某种页面卷曲效果。但是每当涉及<img> 时，它的 src 就会不断覆盖阴影。这是一般限制还是有解决方法？

<ul>
    <li class="imgContainer"><img class="imgFake" /><br><span class="imageTag">some Title</span></li>

    <li class="imgContainer"><img class="imgFake" src="http://wallpaperstock.net/maggie-grace-portrait_wallpapers_14105_1600x1200.jpg"/><br><span class="imageTag">some Title</span></li>

    <li class="imgContainer" style="margin-bottom:50px;"><img class="imgFake" src="http://wallpaperstock.net/maggie-grace-portrait_wallpapers_14105_1600x1200.jpg"/><br><span class="imageTag" style="top:auto; bottom:27px;">some Title</span></li>
</ul>

http://jsfiddle.net/BpgXC/7/

【问题讨论】：

能否请您添加您期望的第四张图片（在 photoshop 中设计）
jsfiddle 目前只在 webkit 浏览器上看起来差不多，但你会在 mozilla 上得到这个想法。
@Chandrakant：更新 jsfiddle 并带有预期结果的模型：jsfiddle.net/BpgXC/7
知道了，您可以将 Z-Index 设置为 .imgFake，对于 exp z-index: -1

标签： html css image pseudo-element

【解决方案1】：

请看一下：http://jsfiddle.net/BpgXC/12/

我已经改了img.imgFakez-index：

img.imgFake {
    position: relative;
    display: block;
    width: 400px;
    height: 250px;
    background: rgba(135,195,235,.5);
    padding: 5px;
    font: 12px/12px sans-serif;
    z-index: -2;
}

【讨论】：

有时候生活就是这么简单。 ^^