css - 周期 2 : is it possible to place the caption above the image?

Question

fiddle 在这里:http://jsfiddle.net/r4qyU/

这是一个具有平铺效果的 JQuery Cycle2 幻灯片。我不知道如何将标题放在图片上方。幻灯片具有插件应用的 overflow: hidden 样式。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<script src="https://rawgithub.com/malsup/cycle2/master/jquery.cycle2.tile.js"></script>
<div class="my-wrapper">
    <div class="cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-timeout=2000 data-cycle-caption-template="{{cycleTitle}}">
        <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-title="Spring">
        <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-title="Redwoods">
        <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-title="Angle Island">
        <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-title="Raquette Lake">
        <div class="cycle-caption"></div>            
    </div>
</div>

和CSS:

.my-wrapper {
    width: 700px;
    height: 500px;
    background: gray;
    padding: 10px;
    margin: auto;
}
.cycle-slideshow {
    width: 100%;
    margin-top: 100px;
}
.cycle-caption {
    background: rgba(0,0,0,.5);
    font-size: 70px;
    right: auto;
    height: 80px;
    line-height: 80px;
    width: 100%;
    top: -40px;
}

Answer 1

你做得很好，一切都快成功了!

我通过以下方式修改了您现有的 css:

.cycle-slideshow {
    width: 100%;
    margin-top: 100px;
    overflow: visible !important;
}

这很重要。如果我不这样做，文本会因为overflow: hidden而被截断，因为我添加了你提供的关键信息位

overflow: visible !important; This effectively overrides any other style rule.

然后我使用 absolute 的 position 来获取图像上方的 .cycle-caption 如下所示:

.cycle-caption {
    background: rgba(0,0,0,.5);
    font-size: 70px;
    height: 80px;
    line-height: 80px;
    width: 100%;
    position: absolute; /* What I added */
    top: -80px; /* This needs to be set to the height of the .cycle-caption */
    left: 0; /* What I added */
} 

这是更新的 jsFiddle对你来说，看看这是否是你想要的。

在我的解决方案之后，我们遇到了一个问题，动画会显示在容器之外，显然这不是我们想要的。我解决这个问题的方法就是将 .cycle-slideshow 的高度设置为 185px 这里是更新的 jsFiddle