如何叠加图像答案

【问题标题】：How to overlay images如何叠加图像
【发布时间】：2010-09-29 01:02:26
【问题描述】：

我想使用 CSS 将一张图片与另一张图片重叠。这方面的一个例子是第一张图片（如果你喜欢背景）将是产品的缩略图链接，该链接打开一个灯箱/弹出窗口，显示图像的更大版本。

在这个链接的图片之上，我想要一张放大镜的图片，向人们展示可以点击图片来放大它（显然，如果没有放大镜，这并不明显）。

【问题讨论】：

您的插件没有回答问题，虽然有些相关，但不是所要求的。

标签： html css

【解决方案1】：

这是一个具有半透明背景的 JQuery 技术。

HTML

<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>

    <ul id="imageGallery">
        <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

CSS

/** Start Coding Here **/
#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay img {
 margin-top: 10%; 
}

#overlay p {
 color:white; 
}

app.js

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

// 1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();

  var imageLocation = $(this).attr("href");

  // 1.1 Show the overlay.
  $overlay.show();

  // 1.2 Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // 1.3 Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);


 // 2. Add overlay
 $("body").append($overlay);

    // 2.1 An image to overlay
    $overlay.append($image);

    // 2.2 A caption to overlay
    $overlay.append($caption);

});

//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});

【讨论】：

【解决方案2】：

我刚刚在一个项目中完成了这件事。 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.：您的代码看起来不错，除了 CSS。引擎从右到左读取 CSS。当您使用“a.gallerypic”时，它首先查找“gallerypic”，然后检查“gallerypic”是否有“a”祖先。要解决这个问题，只需将“a”去掉，就可以得到“.gallerypic”。不需要前面的“a”。
我认为还有一个问题没有解决，那就是你不得不使用 display:block（而图像默认是内联的）。

【解决方案3】：

这是一种在图像链接上显示以半透明背景为中心的叠加图像的好方法：

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

【讨论】：

【解决方案4】：

我们想要的是父母高于孩子。这就是你的做法。

您将img 放入span，为两个元素设置z-index & position，并为span 设置额外的display。将鼠标悬停在span 上，这样您就可以对其进行测试了！

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

【讨论】：

【解决方案5】：

在 CSS3 中，您可以执行以下操作：

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

取自Can I have multiple background images using CSS?

【讨论】：

【解决方案6】：

如果你只希望放大镜悬停，那么你可以使用

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

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

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

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

【讨论】：

【解决方案7】：

使用 CSS 的简单方法仅在不修改内容的情况下带有附加标签的显示在这里（带有代码和示例）： http://soukie.net/2009/08/20/typography-and-css/#example

只要父元素不使用静态定位，它就可以工作。只需将其设置为相对定位即可。此外，IE :before 选择器或 content。

【讨论】：

这实际上效果很好，能够在不更改标记的情况下做到这一点真是太好了！
请粘贴此 URL 中的代码，以防万一。这应该是公认的答案。代码是：p {位置：相对；显示：块； } p:after { 内容: url(magnify.png);位置：绝对；右：20px；顶部：20 像素；

【解决方案8】：

您可能想查看本教程： http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

在其中，作者使用一个空的 span 元素来添加叠加图像。如果您想保持代码尽可能干净，可以使用 jQuery 注入所述跨度元素。上述文章中还举了一个例子。

希望这会有所帮助！

-戴夫

【讨论】：

【解决方案9】：

这是我最近的做法。在语义上并不完美，但可以完成工作。

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

【讨论】：

【解决方案10】：

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

【讨论】：

如果您使用 :before 或 :after 伪选择器，您可以仅使用 javacript 添加 html。这个答案stackoverflow.com/a/3098231/272208 显示了一种在源代码中没有添加第二个 html 元素的方法

【解决方案11】：

this article 建议的一种技术是这样做：

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

【讨论】：

马修，我非常怀疑。