如何叠加图像

我想覆盖一个图像与另一个使用 CSS。这方面的一个例子是第一张图片(如果你喜欢的话，背景)将是一个产品的缩略图链接，链接会打开一个 lightbox/popup，显示图片的放大版本。

在这个链接图片的顶部，我想要一个放大镜的图片，向人们展示这个图片可以点击放大(显然没有放大镜就不明显了)。

316925 次浏览
小开

这篇文章建议的一种方法是这样做:

<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />
小开
最佳答案

我刚刚在一个项目中完成了这个工作，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执行，如果你想，这只是我这样做的方式。

小开

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

小开

我最近是这么做的，虽然语义上不完美，但是完成了任务。

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

如果你只想要悬浮的放大镜，那么你可以使用

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

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

如果你想让它永久存在，你可能应该将它包含在原始缩略图中，或者使用 JavaScript 添加它，而不是将它添加到 HTML 中(这是纯粹的样式，不应该出现在内容中)。

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

小开

你可能想看看这个教程: Http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

在其中，编写器使用一个空的 span 元素来添加一个叠加图像。如果希望代码尽可能干净，可以使用 jQuery 注入所述 span 元素。上述文章中还给出了一个示例。

希望这个能帮上忙！

戴夫

小开

用 CSS 实现这一点的一种简单方法 只有在不修改内容的情况下 这里显示了带有附加标记的 (附代码及示例) : Http://soukie.net/2009/08/20/typography-and-css/#example

只要父元素不使用静态定位，这就可以工作。简单地将它设置为相对定位就可以了。此外，IE < 8不支持 校对: before选择器或 内容。

编辑: 上面的链接不再有效，但可以在 WayBack Machine 上看到: Https://web.archive.org/web/20120213121217/https://soukie.net/2009/08/20/typography-and-css/

小开

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

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

从 我可以有多个背景图片使用 CSS？拿的

小开

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

您将 img放入 span，将 z-index & position设置为两个元素，将额外的 display设置为 span。添加悬停到 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;
}
小开

这里有一个很好的技巧，可以在图片链接上显示以半透明背景为中心的叠加图片:

超文本标示语言

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

应用程序

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

提交答案