html - 向 CSS fling-minislide 添加标题

Question

我发现这很 simple CSS slider在网上。有没有办法为每张图片添加不同的标题？

.fling-minislide {width:300px; height:300px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 100%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}} 
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}

<div class="fling-minislide">
  <img src="https://images.icanvas.com/list-square/abstract-photography-1.jpg" alt="Slide 4" />
  <img src="https://images.icanvas.com/list-square/abstract-photography-2.jpg" />

  <img src="https://images.icanvas.com/list-square/abstract-landscapes.jpg" alt="Slide 2" />

  <img src="https://images.icanvas.com/list-square/abstract-expressive.jpg" alt="Slide 1" />
</div>

Answer 1

一种解决方案是将图像包装在 <figure> 中然后使用 <figcaption>将文本换行。

通过谷歌搜索“图像 slider 标题”找到这个例子:https://codepen.io/dudleystorey/pen/kFoGw

只需确保更改您的 CSS 以通过继承正确定位即可。

---

我做了 this working sample on CodePen

需要注意的几点: * 修改主容器的高度，在本例中为 .fling-minislide为标题留出空间。否则，如果你想让它出现在图像上，你必须修改 z-index wrapper 、图形和标题的位置。 * 修改你的 css 继承以定位图像周围的包装器，在你的情况下 .fling-minislide figure而不是 .fling-minislide img * 修改动画的继承以定位包装器，在本例中为 .fling-minislide figure:nth-child(4) * 为标题添加所需的位置和高度，在我的示例中我这样做了

figcaption {
    height: 100px;
    position: absolute;
    top: 300px; /* height of the image */
    left:0; 
}

请注意，位置是根据图像的高度决定的。

我还限制了图像的高度，以便它们都可以显示在同一位置。

figure img {
    height: 300px;
    overflow: hidden;
    Width: auto;
}