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底部有一个黑色渐变，所以我将文字设为白色，这样你才能正确阅读。希望有所帮助。

Flexslider上的文本叠加

1 个答案: