javascript - 在html页面上用按钮覆盖图像

Question

所以我有一张图片，我想用这样的 html 按钮属性覆盖它:

这是一张空白图片

我想在图像上叠加一个这样的按钮

然后如果按钮被点击，它看起来像这样

据我所知，这可以通过使用 {index-z} 的 CSS 以某种方式完成，或者可以通过 html5 canvas 标签完成。然后用java脚本处理实际的按钮点击。 但是我不完全确定如何完成此操作(我知道使用 javascript 处理按钮单击)。有人可以链接到有关如何执行此操作的教程或给出解释，将不胜感激。

注意:图像本身也是一个 href/链接，如果这改变了它应该如何完成，另外图像本身将在一个有大约 50 个相似图像的画廊中

Answer 1

您可以使用定位将“星形”按钮放置在其他图像的顶部。您的图像和按钮需要位于位置设置为相对的容器中。然后你可以将你的“星号”设置为绝对定位，该位置将相对于容器:

.image-container {
    display: inline-block;
    position: relative;
}

.star-button {
    position: absolute;    
    right: 10px;
    top: 10px;
}


<div class="image-container">
    <img src="main image here">

    <img class="star-button" src="star image here">
</div>

然后您可以在您的 javascript 中处理图像(或按钮，或您有什么)的点击。

JSFiddle