圖像不禮貌z-index和覆蓋假元素的陰影

我想用僞元素:: after和:: before來創建附加陰影以創建頁面捲曲效果的排序。但是，無論何時涉及<img>，其src一直覆蓋陰影。這是一個普遍的限制還是有解決方法？圖像不禮貌z-index和覆蓋假元素的陰影

<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/

來源

2012-08-11 maddrag0n

能否請您補充一點，你預計第4圖像（它設計在Photoshop中） – Chandrakant 2012-08-11 09:38:57

jsfiddle目前只在webkit瀏覽器上看起來很正確，但你會用mozilla得到這個想法。 – maddrag0n 2012-08-11 09:39:32

@Chandrakant：更新jsfiddle與預期的結果模型：http://jsfiddle.net/BpgXC/7/ – maddrag0n 2012-08-11 09:52:50

請看看：http://jsfiddle.net/BpgXC/12/

我已經改變了img.imgFake的z-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; 
}

來源

2012-08-11 09:54:54

有時生活可以那麼簡單。 ^^ – maddrag0n 2012-08-11 10:11:19

圖像不禮貌z-index和覆蓋假元素的陰影

回答

相關問題