我想使用伪元素:: 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>
答案 0 :(得分:1)
请看一下: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;
}