如何叠加图像

Question

我想使用CSS将一张图片覆盖在另一张图片上。 例如，第一张图像（如果您喜欢，则为背景）将是产品的缩略图链接，该链接会打开一个灯箱/弹出窗口，显示图像的更大版本。

在连接的图像顶部，我想放置一个放大镜的图像，以向用户展示可以单击图像进行放大（显然没有放大镜不太明显）。

- Robin Barnes

---

你的插件没有回答问题，虽然有点相关，但并不是被问到的内容。 - Bashevis

Answer 1

在我的一个项目中，我刚刚完成了这个准确的操作。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执行，你可以这样做，这只是我选择的方式。

- Tim K.

---

是的，我想这可能最终会成为一个绝对定位的解决方案。我喜欢这个的原因是主要图像仍然是一张图片，而不是变成背景图片。 - Robin Barnes

Tim K.：你的代码看起来很好，除了 CSS 部分。引擎是从右到左读取 CSS 的。当你使用 'a.gallerypic' 时，它首先查找 'gallerypic'，然后检查 'gallerypic' 是否有一个 'a' 祖先。 为了解决这个问题，只需去掉 'a'，这样你就得到了 '.gallerypic'。不需要前面的 'a'。 - martin villa

我认为有一个问题仍然没有解决，那就是你被迫使用display:block（而图像默认为inline）。 - Peter Tseng

Answer 2

有一种技术，这篇文章建议采用以下方法：

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

- nerdposeur

---

Matthieu，我非常怀疑。 - David Sherret

Answer 3

这里展示了一种仅使用CSS而不修改内容添加附加标签的简单方法（附有代码和示例）：http://soukie.net/2009/08/20/typography-and-css/#example 只要父元素没有使用静态定位，这种方法就可以奏效。将其设置为相对定位即可。另外，IE＜8不支持:before选择器或content属性。

编辑： 以上链接已失效，但可在WayBack Machine上查看：https://web.archive.org/web/20120213121217/https://soukie.net/2009/08/20/typography-and-css/

- enki

---

这实际上非常有效，很棒能够在完全不改变标记的情况下做到这一点！ - henrikakselsen

请复制该网址中的代码，以防止其失效。这段代码如下： p { position: relative; display: block; } p:after { content: url(magnify.png); position: absolute; right: 20px; top: 20px; - Eric Steinborn

Answer 4

你可能想查看这个教程：http://www.webdesignerwall.com/tutorials/css-decorative-gallery/ 在这个教程中，作者使用空的 span 元素来添加重叠的图片。如果您希望尽可能保持代码简洁，可以使用 jQuery 注入这些 span 元素。上述文章中还给出了一个示例。

希望这可以帮到你！

-Dave

- user50384

Answer 5

最近我是这样做的。虽然不完美，但能完成任务。

这里是如何做到的。

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

- Jim

Answer 6

在CSS3中，你可以做到以下几点：

.double-image {
    background-image: url(images/img1.png), url(images/img2.png);
}

从我可以使用CSS有多个背景图片吗？中获取

- Benjamin Crouzier

Answer 7

如果你只想要在悬停时出现放大镜，那么你可以使用

a:hover img { cursor: url(glass.cur); }

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

如果您想要它永久存在，您应该考虑将其包含在原始缩略图中，或者使用JavaScript添加它，而不是将其添加到HTML中（这纯粹是样式，不应该出现在内容中）。

如果您需要JavaScript方面的帮助，请告诉我。

- Steve Perks

Answer 8

我们只是希望父级元素在子级元素之上。这是如何实现的。

您可以将放入中，为两个元素设置和，并为添加额外的。添加鼠标悬停到上，以便测试，然后你就做到了！

HTML：

<span><img src="/images/"></span>

CSS

span img {
    position:relative;
    z-index:-1;
}
span {
    position:relative;
    z-index:initial;
    display:inline-block;
}
span:hover {
    background-color:#000;
}

- Mr Br

Answer 9

除非您使用<img>标签，该标签单独显示图像，否则您将无法仅通过纯CSS实现此目的。您还需要两个HTML元素 - 每个图片一个。这是因为您唯一可以通过CSS使元素显示图片的方法是使用background-image属性，而每个元素只能有一个背景图像。您选择哪两个元素以及如何定位它们取决于您。有许多方法可以将一个HTML元素定位在另一个元素上方。

- Vilx-

---

如果您使用:before或:after伪选择器，您可以仅使用JavaScript添加HTML。这个答案https://dev59.com/DHRC5IYBdhLWcg3wG9bp#3098231展示了一种不需要第二个HTML元素添加到源代码的方法。 - Jessica Brown

Answer 10

这是一个很好的技巧，用来显示一个半透明的背景覆盖在图片上，并且居中覆盖于图片链接之上：

HTML

<div class="image-container">
    <a class="link" href="#" >  
        <img class="image" src="/img/thumbnail.png"/>
        <span class="overlay-image"><img src="/img/overlay.png"></span>
    </a>    
</div>

CSS

div.image-container{
    position: relative;
}
a.link{
    text-decoration: none;  
    position: relative;
    display: block;
}

a.link span.overlay-image{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.2); /* black background with 20% alpha */
}

a.link span.overlay-image:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;   
}

a.link:hover span.overlay-image img{
    display: inline-block;  
    vertical-align: middle;     
}

a.link:hover span.overlay-image{
    visibility: visible;
}

- Crackerjack