css - 如何在缩略图顶部添加 html 元素

Question

我在画廊中有一个缩略图列表，我想知道如何制作这样的东西？

在我的理解中，我认为可能的唯一方法是将缩略图作为 div 内的背景图像，并将这些元素显示在其顶部。有没有其他方法可以做到这一点？

Answer 1

您可能可以使用图像周围的包装器 div 来实现类似的效果，其中 div 包含您的叠加内容作为图像的兄弟姐妹：-

<div class='image'>
  <img src='' />
  <div class='image__overlay'></div>
</div>

那么你的 CSS 会是这样的：-

.image {
  position: relative;
}
.image__overlay {
  position: absolute;
  top: 0;
  left: 0;
}

如果这是您的目标，您可以使用 a 隐藏叠加层，display: none并且仅使其显示在 div.image 的 :hover 上。