本文介绍了如何覆盖图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想用另一个使用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.

这篇关于如何覆盖图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 11:47