css - 带有图案覆盖问题的 slider

Question

我正在尝试创建一个淡入淡出图像和文本的 slider 。例如，使用 Flexslider 就足够简单了，但是我如何才能使 slider 的图案覆盖在图像上方，但在文本下方？

<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

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