滑块与图案叠加问题

时间:2014-04-28 13:14:55

标签: css slider

我正在尝试创建一个淡出图像和文本的滑块。这很简单,例如使用Flexslider,但我如何制作它以使滑块有一个位于图像上方的图案叠加层,但位于文本下方?

<div class="flexslider">
    <div id="pattern"></div>
    <ul class="slides">
        <li>
            <div class="slider_text"><span>Some Text<br/>Over the Image</span></div>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
        </li>
        <li>
            <div class="slider_text"><span>Some Text<br/>Over the Image</span></div>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
        </li>
    </ul>    
</div>

FIDDLE

在小提琴中,我添加了模式,但它也涵盖了文本......无论如何要做到这一点?我真的不想将模式放在每个<li>中,但到目前为止,这是我能想到的唯一解决方案。

谢谢!

1 个答案:

答案 0 :(得分:1)

因此我们将模式移到ul并将文本的z-index设置得更高。

DEMO HERE

我添加的代码清楚地显示了最新情况。

CSS:

.slider_text {
    z-index: 999;
}

因此我们将#pattern移到ul内。

HTML:

<ul class="slides">
    <div id="pattern"></div>