javascript - Flexslider 上的文本叠加

Question

我正在使用 flexslider，我正在尝试为每张幻灯片添加一个单独的文本叠加层，但我不太走运。

<div class="flexslider">
    <ul class="slides">
        <li>
           <img src="http://placehold.it/350x150">
           <div class="RCSlideoverlay">CLICK HERE</div>

        </li>
        <li>
            <img src="http://placehold.it/350x150">
        </li>
        <li>
            <img src="http://placehold.it/350x150">
        </li>
    </ul>
</div>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    pauseOnHover: true,
    controlNav: true, 
    directionNav: false, 
    });
});
</script>

Answer 1

我如何处理这个只是添加了一个 <span>在图像下方使用类名标记，然后使用 CSS 定位它们。

HTML:

<li>
  <a href="#"><img src="http://placehold.it/660x440" width="100%" height="100%">
  <span class="flex-caption">Place Hold It Image</span></a>
</li>

CSS:

/*Caption Text*/
.flex-caption {
    bottom:50px;
    color: white;
    font-size: 16px;
    line-height: 20px;
    left:0;
    padding:0 20px;
    position:absolute;
    right:0;
    text-transform: uppercase;
    z-index:1;
}

我的 flexslider 底部有一个黑色渐变，所以我将文本设为白色，以便您可以正确阅读。希望对您有所帮助。