Html 如何叠加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/403478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay images
提问by Robin Barnes
I want to overlay one image with another using CSS. An example of this is the first image (the background if you like) will be a thumbnail link of a product, with the link opening a lightbox / popup showing a larger version of the image.
我想使用 CSS 将一个图像与另一个图像重叠。一个例子是第一张图片（如果你喜欢背景）将是产品的缩略图链接，链接打开一个灯箱/弹出窗口，显示图像的更大版本。
On top of this linked image I would like an image of a magnifying glass, to show people that the image can be clicked to enlarge it (apparently this isn't obvious without the magnifying glass).
在这个链接的图像之上，我想要一个放大镜的图像，向人们展示可以单击图像放大它（显然，如果没有放大镜，这并不明显）。
采纳答案by Tim Knight
I just got done doing this exact thing in a project. The HTML side looked a bit like this:
我刚刚在一个项目中完成了这件事。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>
Then using CSS:
然后使用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;
}
I left a lot of the sample in there on the CSS so you can see how I decided to do the style. Note I lowered the opacity so you could see through the magnifying glass.
我在 CSS 上留下了很多示例，因此您可以看到我是如何决定做这种样式的。注意我降低了不透明度，以便您可以通过放大镜看到。
Hope this helps.
希望这可以帮助。
EDIT: To clarify for your example - you could ignore the visibility:hidden;and kill the :hoverexecution if you wanted, this was just the way I did it.
编辑：为了澄清你的例子 -如果你愿意，你可以忽略visibility:hidden;并终止:hover执行，这就是我这样做的方式。
回答by Nathan Long
One technique, suggested by this article, would be to do this:
本文建议的一种技术是这样做：
<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />
回答by enki
A simple way of doing that with CSS only without modifying the content with additional tags is shown here (with code and example): http://soukie.net/2009/08/20/typography-and-css/#example
此处显示了一种仅使用 CSS 执行此操作而不使用附加标签修改内容的简单方法（带有代码和示例）：http: //soukie.net/2009/08/20/typography-and-css/#example
This works, as long as the parent element is not using static positioning. Simply setting it to relative positioning does the trick. Also, IE <8 don't support the :beforeselector or content.
只要父元素不使用静态定位，这就有效。只需将其设置为相对定位即可。此外，IE <8 不支持:before选择器或content。
回答by plntxt
Here is how I did it recently. Not perfect semantically, but gets the job done.
这是我最近的做法。在语义上并不完美，但可以完成工作。
<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>
回答by plntxt
You might want to check out this tutorial: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
您可能想查看本教程：http: //www.webdesignerwall.com/tutorials/css-decorative-gallery/
In it the writer uses an empty span element to add an overlaying image. You can use jQuery to inject said span elements, if you'd like to keep your code as clean as possible. An example is also given in the aforementioned article.
在其中，作者使用一个空的 span 元素来添加叠加图像。如果您想让代码尽可能干净，您可以使用 jQuery 注入上述 span 元素。前面提到的文章中也给出了一个例子。
Hope this helps!
希望这可以帮助！
-Dave
-戴夫
回答by Steve Perks
If you're only wanting the magnifing glass on hover then you can use
如果您只想要悬停时的放大镜，那么您可以使用
a:hover img { cursor: url(glass.cur); }
http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
If you want it there permanently you should probably either have it included in the original thumnail, or add it using JavaScript rather than adding it to the HTML (this is purely style and shouldn't be in the content).
如果您希望它永久存在，您可能应该将其包含在原始缩略图中，或者使用 JavaScript 添加它而不是将其添加到 HTML（这纯粹是样式，不应包含在内容中）。
Let me know if you want help on the JavaScript side.
如果您需要 JavaScript 方面的帮助，请告诉我。
回答by Benjamin Crouzier
In CSS3, you can do the following:
在 CSS3 中，您可以执行以下操作：
.double-image {
background-image: url(images/img1.png), url(images/img2.png);
}
回答by Mr Br
All we want is parent above child. This is how you do it.
我们想要的只是父母高于孩子。这就是你如何做到的。
You put imginto span, set z-index & positionfor both elements, and extra displayfor span. Add hover to spanso you can test it and you got it!
您将两个元素img放入span, set z-index & position，并display为 span 添加extra 。将悬停添加到，span以便您可以对其进行测试并获得它！
HTML:
HTML：
<span><img src="/images/"></span>
CSS
CSS
span img {
position:relative;
z-index:-1;
}
span {
position:relative;
z-index:initial;
display:inline-block;
}
span:hover {
background-color:#000;
}
回答by CrackerHyman
Here's a good technique to display an overlay image that is centered with a semi-transparent background over an image link:
这是在图像链接上显示以半透明背景为中心的叠加图像的好方法：
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
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;
}
回答by Durul Dalkanat
Here's a JQuery Technique with semi-transparent background.
这是具有半透明背景的 JQuery 技术。
HTML
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
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
应用程序.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();
});
