如何在缩略图图像上添加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; 
} 

可以隐藏了display: none覆盖，只让它显示在：在div.image的悬停，如果这是你目标实现的目标。