javascript - 如何在图像(灯箱缩略图)上显示图标？

Question

我有一个如下所示的 HTML 代码:

<p>
    <a href="image.jpg" rel="lightbox" title="Image 1" rtekeep="1">
        <img src="image.jpg" />
    </a>
</p>

我现在想使用一个显示在图像上的图标。我知道使用 div 并为该 div 提供背景图像是有意义的，但如果有 CSS 或 jQuery 解决方案我会很高兴，因为该 HTML 代码在我们的网站上被使用了大约 200 次，所以它会更改它们中的每一个都需要很长时间。

Answer 1

您可以使用 jQuery append 在图像上添加图标。

例子:

HTML:

<p>
    <a href="image.jpg" rel="lightbox" title="Image 1" rtekeep="1">
        <img src="image.jpg" />
    </a>
</p>

CSS:

.thumbnail-container{
  display: block;
  position: relative;
  overflow: hidden;
}
.thumbnail-container a{
  display: block;
  width: 100px;
  height: 100px;
}
.thumbnail-container img{
  width: 100%;
  height: 100%;
}
.thumbnail-icon{
  position: absolute;
  top: 40px;
  left: 40px;
  width: 16px;
  height: 16px;
  background-image: url('http://cdn.flaticon.com/png/256/70376.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 99;
}

jQuery:

$("p").addClass("thumbnail-container");
$("p.thumbnail-container").append( "<div class='thumbnail-icon'></div>" );

fiddle :https://jsfiddle.net/9md20cws/3/