blocks|key|1660572|text|this+article建议的一种技术是这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1660573|<img+style="background:url(thumbnail1.jpg)"+src="magnifying_glass.png"+/>|code-block|syntax|javascript|1660574|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tjkdesign.com/articles/png_overlay_with_no_extra_markup.asp^0|0|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

One technique, suggested by <a href="http://www.tjkdesign.com/articles/png_overlay_with_no_extra_markup.asp" rel="noreferrer">this article</a>, would be to do this:

<pre><code>&lt;img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" /&gt;
</code></pre>

blocks|key|1445803|text|我刚刚在一个项目中做完了这件事。HTML端看起来有点像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445804|<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">
++
</a>|code-block|syntax|javascript|1445805|然后使用CSS：|1445806|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%25;
++top:35%25;
++filter:alpha(opacity=50);
++-moz-opacity:0.5;
++-khtml-opacity:+0.5;
++opacity:+0.5;
}

a.gallerypic:hover+span.zoom-icon{
++visibility:visible;
}|1445807|我在CSS上留下了很多样本，所以你可以看到我是如何决定做这个样式的。注意，我降低了不透明度，这样你就可以透过放大镜看到东西了。|1445808|希望这能有所帮助。|1445809|编辑:为了澄清你的例子-如果你愿意，你可以忽略visibility:hidden;并终止:hover的执行，这就是我所做的。|offset|length|style|CODE|1445810|entityMap^0|0|0|0|0|0|0|N|I|18|6|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]|$Q|15|R|16|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

I just got done doing this exact thing in a project. The HTML side looked a bit like this:

<pre><code>&lt;a href="[fullsize]" class="gallerypic" title=""&gt;
 &lt;img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" /&gt;
 &lt;span class="zoom-icon"&gt;
 &lt;img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom"&gt;
 &lt;/span&gt;
&lt;/a&gt;
</code></pre>

Then using CSS:

<pre><code>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;
}
</code></pre>

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.

Hope this helps.

EDIT: To clarify for your example - you could ignore the <code>visibility:hidden;</code> and kill the <code>:hover</code> execution if you wanted, this was just the way I did it.

blocks|key|1660661|text|除非您使用<img>标记，否则您将无法仅使用纯CSS来实现这一点。您还需要两个HTML元素-每个图片一个。这是因为通过CSS使元素显示图片的唯一方法是使用background-image属性，并且每个元素只能有一个背景图像。您选择哪两个元素以及如何定位它们由您决定。有许多方法可以将一个HTML元素放置在另一个元素之上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1660662|entityMap^0|5|5|25|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Unless you use the <code>&lt;img&gt;</code> tag, which displays an image by itself, you will not be able to achieve this with pure CSS alone. You will also need TWO HTML elements as well - one for each picture. This is because the only way you can make an element display a picture via CSS is with the <code>background-image</code> property, and every element can have only one background image. Which two elements you choose and how you position them is up to you. There are many ways how you can position one HTML element above another.

blocks|key|1445908|text|这是我最近是如何做到的。在语义上不是完美的，但可以完成工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445909|<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>|code-block|syntax|javascript|1445910|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is how I did it recently. Not perfect semantically, but gets the job done. 

<pre><code>&lt;div class="container" style="position: relative"&gt;
&lt;img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg"&gt;
&lt;div style="z-index: 100; left: 72px; position: absolute; top: 39px"&gt;
&lt;img alt="top image" src="images/top-image.jpg"&gt;&lt;/div&gt;&lt;/div&gt;
</code></pre>

blocks|key|1445960|text|如果你只想让放大镜处于悬停状态，那么你可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445961|a:hover+img+{+cursor:+url(glass.cur);+}|code-block|syntax|javascript|1445962|http://www.javascriptkit.com/dhtmltutors/csscursors.shtml|offset|length|1445963|如果你希望它永久存在，你可能应该将它包含在原始缩略图中，或者使用JavaScript添加它，而不是将它添加到HTML中(这是纯粹的样式，不应该出现在内容中)。|1445964|如果您需要JavaScript方面的帮助，请告诉我。|1445965|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|H]]]]

If you're only wanting the magnifing glass on hover then you can use 

<pre><code>a:hover img { cursor: url(glass.cur); }
</code></pre>

<a href="http://www.javascriptkit.com/dhtmltutors/csscursors.shtml" rel="nofollow noreferrer">http://www.javascriptkit.com/dhtmltutors/csscursors.shtml</a>

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

Let me know if you want help on the JavaScript side.

blocks|key|1446010|text|您可能想要查看此教程：http://www.webdesignerwall.com/tutorials/css-decorative-gallery/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1446011|在它中，作者使用一个空的span元素来添加一个覆盖图像。如果你想让你的代码尽可能的干净，你可以使用jQuery注入上述的span元素。在前面的文章中也给出了一个例子。|1446012|希望这能有所帮助！|1446013|-Dave|1446014|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webdesignerwall.com/tutorials/css-decorative-gallery/^0|B|1S|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

You might want to check out this tutorial:
 <a href="http://www.webdesignerwall.com/tutorials/css-decorative-gallery/" rel="nofollow noreferrer">http://www.webdesignerwall.com/tutorials/css-decorative-gallery/</a>

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.

Hope this helps!

-Dave

blocks|key|1660811|text|在CSS3中，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1660812|.double-image+{
++++background-image:+url(images/img1.png),+url(images/img2.png);
}|code-block|syntax|javascript|1660813|摘自Can+I+have+multiple+background+images+using+CSS?|offset|length|1660814|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css^0|0|0|2|1C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

In CSS3, you can do the following:

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

Took from <a href="https://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css">Can I have multiple background images using CSS?</a>

blocks|key|1446063|text|我们想要的是父母凌驾于孩子之上。这就是你怎么做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446064|将img放入span，为两个元素设置z-index+&+position，并为span设置额外的display。将悬停添加到span，这样你就可以测试它并获得它！|offset|length|style|CODE|1446065|HTML：|1446066|<img+src="/images/">|code-block|syntax|javascript|1446067|CSS|1446068|span+img+{
++++position:relative;
++++z-index:-1;
}
span+{
++++position:relative;
++++z-index:initial;
++++display:inline-block;
}
span:hover+{
++++background-color:#000;
}|1446069|entityMap^0|0|1|3|6|4|I|I|1C|7|1Q|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$]]

All we want is parent above child. This is how you do it.

You put <code>img</code> into <code>span</code>, set <code>z-index &amp; position</code> for both elements, and extra <code>display</code> for span. Add hover to <code>span</code> so you can test it and you got it! 

HTML:

<pre><code>&lt;span&gt;&lt;img src="/images/"&gt;&lt;/span&gt;
</code></pre>

CSS

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

blocks|key|1446113|text|这里有一个很好的技术来显示覆盖图像，该图像在图像链接上以半透明的背景居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446114|HTML|1446115|<div+class="image-container">
++++<a+class="link"+href="#"+>++
++++++++<img+class="image"+src="/img/thumbnail.png"/>
++++++++<span+class="overlay-image"><img+src="/img/overlay.png">
++++</a>++++
</div>|code-block|syntax|javascript|1446116|CSS|1446117|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%25+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%25;+++
}

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

a.link:hover+span.overlay-image{
++++visibility:+visible;
}|1446118|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here's a good technique to display an overlay image that is centered with a semi-transparent background over an image link:

<h2>HTML</h2>

<pre><code>&lt;div class="image-container"&gt;
 &lt;a class="link" href="#" &gt; 
 &lt;img class="image" src="/img/thumbnail.png"/&gt;
 &lt;span class="overlay-image"&gt;&lt;img src="/img/overlay.png"&gt;&lt;/span&gt;
 &lt;/a&gt; 
&lt;/div&gt;
</code></pre>

<h2>CSS</h2>

<pre><code>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;
}
</code></pre>

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. 

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

How to overlay images

jQuery

我想使用CSS覆盖一个图像与另一个图像。例如，第一张图片(如果你喜欢的话是背景)将是一个产品的缩略图链接，该链接打开一个灯箱/弹出窗口，显示图片的放大版本。在这个链接的图像上，我想要一个放大镜的图像，向人们展示图像可以被点击来放大它(显然这在没有放大镜的情况下并不明显)。

问如何叠加图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何叠加图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何叠加图像
EN