jquery - 在图像轮播顶部添加文本

Question

我希望将不同的文本段落放在我正在使用的 jquery 轮播中的幻灯片上。正在使用的html如下；

<div class="slider">
    <ul class="slides">
        <li class="slide">
            <p>example text to sit on top of carousel and change when you click
            through carousel images</p>
            <img src="library/images/item1.jpg" class="imgdivide">
        </li>
        <li class="slide">
            <img src="library/images/item2.jpg" class="imgdivide">
        </li>
        <li class="slide">
            <img src="library/images/item1.jpg" class="imgdivide">
        </li>
        <li class="slide">
            <img src="library/images/item2.jpg" class="imgdivide">
        </li>   
    </ul>
</div>

这是我目前的造型；

.slider {
    position: relative; 
    width: 100%; 
    height: 50%;
    overflow: hidden;
}

.slides { 
    width: 100%; 
    height: 50%; 
    overflow: hidden;
}

.slide p { 
    width: 100%;
    display: block;
    font-family: Georgia,"Times New Roman", Times, serif;
    size:16px; 
    line-height: 20px; 
    color: #FFF;
}

.slide {
    width: 100%; 
    float: left; 
}

如果有人能在这方面提供帮助，那将是王牌！

Answer 1

使用具有一些 z-index 的类尝试您的文本。像这样：

    <li class="slide">
        <p class="text-top-image">example text to sit on top of carousel and change when you click
        through carousel images</p>
        <img src="library/images/item1.jpg" class="imgdivide">
    </li>

你的CSS是这样的：

.text-top-image{
    z-index: 100;
}