0

我正在为幻灯片使用 jquery cycle2 插件。现在我面临一个挑战。我可以使用该插件制作幻灯片，但问题是我想在图像顶部写一些文本，并且文本只需要出现在该特定图像中。但是，如果我使用 css 将幻灯片 div 位置设为相对而将文本 div 位置设为绝对，则不会发生任何事情。

代码 HTML：

<div class="offset1 span12 cycle-slideshow">
    <img src="assets/img/1.jpg">
        <div id="text1">
            <strong>A</strong><span>lpha</span>
        </div>
    <img src="assets/img/2.jpg">
    <img src="assets/img/3.jpg">
</div>

代码CSS：

.cycle-slideshow {
position: relative; 
}
#text1 {
    position: absolute; 
    top: 200px; 
}

Anyhelp 将非常高兴。

4

2 回答 2

1

按照文档中描述的步骤操作：

  1. .cycle-overlay在循环幻灯片 中添加一个带有类的 div
    • 添加 CSS 规则
  2. 在幻灯片上添加data-cycle-title和data-cycle-desc属性。必要时留空。

演示在这里

于 2013-11-11T07:22:42.040 回答
0

这可能对你有帮助。如果这不起作用意味着你的幻灯片 div 可能包含比你的文本 div 大的 z-index

.cycle-slideshow {
position: relative; 
z-index:1;

}
#text1 {
    position: absolute; 
    top: 200px; 
    color:#fff;
    z-index:2;

}

http://jsfiddle.net/TDSFF/

于 2013-11-11T05:31:55.087 回答