如何叠加图像

Question

我想使用 CSS 将一张图片与另一张图片叠加。这方面的一个例子是第一张图片（如果你喜欢背景）将是产品的缩略图链接，链接打开灯箱/弹出窗口显示图像的放大版本。

在此链接图像之上，我想要一个放大镜的图像，向人们展示可以单击该图像以将其放大（显然，如果没有放大镜，这并不明显）。

原文由 Robin Barnes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚在一个项目中完成了这件事。 HTML 端看起来有点像这样：

 <a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

然后使用 CSS：

 a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

我在 CSS 上留下了很多示例，这样你就可以看到我是如何决定做这个样式的。请注意，我降低了不透明度，以便您可以通过放大镜看到。

希望这可以帮助。

编辑：为了澄清你的例子 - 你可以忽略 visibility:hidden; 并杀死 :hover 如果你愿意，这就是我做的方式。

原文由 Tim Knight 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这篇文章 建议的一种技术是：

 <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />

原文由 Nathan Long 发布，翻译遵循 CC BY-SA 2.5 许可协议