如何叠加图像

我想使用CSS将一个图像与另一个图像叠加.这方面的一个例子是第一个图像(如果你愿意,背景)将是产品的缩略图链接,链接打开一个灯箱/弹出窗口,显示更大的图像版本.

在这个链接图像的顶部,我想要一个放大镜的图像,向人们展示可以点击图像放大它(显然没有放大镜这是不明显的).

1> Tim Knight..：

---

我刚刚在一个项目中做了这件事.HTML方面看起来有点像这样:

然后使用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执行,这就是我做的方式.

---

Tim K.:你的代码看起来很好,除了CSS.引擎从右到左读取CSS.当你使用'a.gallerypic'时,它首先看'gallerypic',然后检查'gallerypic'是否有'a'祖先.为了解决这个问题,简单地将"a"排除在外,这样你就得到了".gallerypic".不需要前面的'a'.

2> Nathan Long..：

---

本文提出的一种技术是:

3> 小智..：

---

这里只显示了使用CSS而不使用其他标记修改内容的简单方法(使用代码和示例):http: //soukie.net/2009/08/20/typography-and-css/#example

只要父元素不使用静态定位,这就有效.简单地将其设置为相对定位就可以了.此外,IE <8不支持:before选择器或内容.

---

这实际上非常有效,很高兴能够在不改变标记的情况下做到这一点!

---

请粘贴此网址中的代码,以防万一.这应该是公认的答案.代码是:p {position:relative; 显示:块; } p:在{content:url(magnify.png)之后; 位置:绝对; 右:20px; 上:20px;