Question

我正在尝试创建一个淡出图像和文本的滑块。这很简单，例如使用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>中，但到目前为止，这是我能想到的唯一解决方案。

谢谢！

Answer 1

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

DEMO HERE

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

CSS：

.slider_text {
    z-index: 999;
}

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

HTML：

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

滑块与图案叠加问题

1 个答案:

CSS：

HTML：