如何叠加图像 [英] How to overlay images
问题描述
我想使用 CSS 将一张图片与另一张图片重叠.这方面的一个例子是第一张图片(如果你喜欢背景)将是产品的缩略图链接,链接打开一个灯箱/弹出窗口,显示图像的更大版本.
I want to overlay one image with another using CSS. An example of this is the first image (the background if you like) will be a thumbnail link of a product, with the link opening a lightbox / popup showing a larger version of the image.
在这张链接图片的顶部,我想要一张放大镜的图片,向人们展示可以点击图片放大它(显然,如果没有放大镜,这并不明显).
On top of this linked image I would like an image of a magnifying glass, to show people that the image can be clicked to enlarge it (apparently this isn't obvious without the magnifying glass).
推荐答案
我刚刚在一个项目中完成了这件事.HTML 方面看起来有点像这样:
I just got done doing this exact thing in a project. The HTML side looked a bit like this:
<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 上留下了很多示例,因此您可以看到我是如何决定设计这种样式的.请注意,我降低了不透明度,以便您可以通过放大镜看到.
I left a lot of the sample in there on the CSS so you can see how I decided to do the style. Note I lowered the opacity so you could see through the magnifying glass.
希望这会有所帮助.
为了澄清您的示例 - 如果您愿意,您可以忽略 visibility:hidden;
并终止 :hover
执行,这就是我所做的
To clarify for your example - you could ignore the visibility:hidden;
and kill the :hover
execution if you wanted, this was just the way I did it.
这篇关于如何叠加图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!