我正在尝试创建一个淡出图像和文本的滑块。这很简单,例如使用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>
在小提琴中,我添加了模式,但它也涵盖了文本......无论如何要做到这一点?我真的不想将模式放在每个<li>
中,但到目前为止,这是我能想到的唯一解决方案。
谢谢!
答案 0 :(得分:1)
因此我们将模式移到ul
并将文本的z-index
设置得更高。
我添加的代码清楚地显示了最新情况。
.slider_text {
z-index: 999;
}
因此我们将#pattern
移到ul
内。
<ul class="slides">
<div id="pattern"></div>