如何在图像上显示图标(灯箱缩略图）

How to display an icon over an image (lightbox thumbnail)?

本文关键字：略图 在图像上显示 图标      更新时间：2023-09-26

我有一个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 次，所以更改它们中的每一个需要很长时间。

您可以使用

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;
}

j查询：

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

小提琴：https://jsfiddle.net/9md20cws/3/

你可以使用绝对元素来做到这一点。然后使用左，上，右，底部设置图像位置。像这样：

p{
/* children in this p are floating in this element instead of body */
    position: relative;
}
p > img {
    position: absolute;
    top : ...;
    left: ...;
}

css

.overlay{
position:absolute;
top:0;
left:0;
font-family:...;
}
.someGenericClass{position:relative}

jQuery

$(p).addClass("someGenericClass");//you have to target desired p from your page...
var element = "<div class="overlay"></div>"
$(p>a).append(element);

您可以将图像分成 2 个部分，然后在悬停时显示该部分的后半部分或使用 jquery 在鼠标输入时追加。

jQuery

$(p).mouseenter(function(){
$(this).append('<div class="element"></div>');
});

.CSS

.element {
position:absolute;
top:0;
left:0;
background:url(img.jpg);
}
相关文章：