Flexslider上的文本覆盖

我正在使用flexslider，我试图为每张幻灯片添加单独的文本覆盖图，但没有太多运气。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>

来源

2014-11-05 Peter Chappy

好吧，看起来你可能需要一些'javascript' – Phil 2014-11-05 17:24:17

你能否至少指向正确的方向？前端开发相对较新，只是试图学习。 – 2014-11-05 17:43:44

我如何处理，这是简单地增加了一个<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有在底部的黑色渐变，所以我让我的文字的白色，所以你可以正确读取它。希望有所帮助。

来源

2014-11-05 17:45:49 crazymatt

Flexslider上的文本覆盖

回答

相关问题