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>" );

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

Answer 2

你可以使用绝对元素来做到这一点。然后使用left，top，right，bottom设置图像位置。像这样的东西：

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

Answer 3

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

Answer 4

您可以将图像拆分为2个部分，然后在hover 上显示该部分的后半部分，或者使用jquery在鼠标输入时附加。

的jQuery

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

CSS

.element {
position:absolute;
top:0;
left:0;
background:url(img.jpg);
}

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

4 个答案: