0

ある種のページカール効果を作成するために、疑似要素::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/

4

1 に答える 1

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;
}
于 2012-08-11T09:54:54.963 に答える