如何叠加图像

一尘不染

如何叠加图像

html

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

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

阅读 498

2020-05-10

共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执行，这只是我的方法。

2020-05-10