在图片轮播界面顶部添加文字

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 索引的类尝试文本。 像这样：

    <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;
}