如何叠加图像
如何叠加图像
提问于 2009-01-01 01:00:08
我想使用CSS覆盖一个图像与另一个图像。例如，第一张图片(如果你喜欢的话是背景)将是一个产品的缩略图链接，该链接打开一个灯箱/弹出窗口，显示图片的放大版本。
在这个链接的图像上，我想要一个放大镜的图像，向人们展示图像可以被点击来放大它(显然这在没有放大镜的情况下并不明显)。
回答 9
Stack Overflow用户
回答已采纳
发布于 2008-12-31 17:15:14
我刚刚在一个项目中做完了这件事。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的执行，这就是我所做的。
Stack Overflow用户
发布于 2008-12-31 17:10:55
this article建议的一种技术是这样做：
<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />Stack Overflow用户
发布于 2008-12-31 17:26:25
这是我最近是如何做到的。在语义上不是完美的，但可以完成工作。
<div class="container" style="position: relative">
<img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
<div style="z-index: 100; left: 72px; position: absolute; top: 39px">
<img alt="top image" src="images/top-image.jpg"></div></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/403478
复制相关文章
相似问题