如何叠加图像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (34)

我想用CSS叠加一个图像。例如,第一张图片(如果你喜欢,背景图片)将会是产品的缩略图链接,链接将打开一个Lightbox /弹出窗口,显示更大版本的图片。

在这个链接的图片上,我想要一个放大镜的图像,向人们展示图片可以被点击放大(显然这不是没有放大镜就不明显)。

提问于
用户回答回答于

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

Then using 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;
}
用户回答回答于

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

扫码关注云+社区