Html 如何覆盖图像
我想用CSS将一个图像与另一个图像叠加。这方面的一个例子是,第一个图像(如果您愿意,背景)将是产品的缩略图链接,该链接打开一个灯箱/弹出窗口,显示图像的更大版本Html 如何覆盖图像,html,css,Html,Css,我想用CSS将一个图像与另一个图像叠加。这方面的一个例子是,第一个图像(如果您愿意,背景)将是产品的缩略图链接,该链接打开一个灯箱/弹出窗口,显示图像的更大版本 在这个链接图像的顶部,我想要一个放大镜的图像,向人们展示可以点击图像来放大它(显然,没有放大镜这一点并不明显)。作者建议的一种技术是: <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" /> 我刚刚在一个项目中完成了这项工作。HTM
在这个链接图像的顶部,我想要一个放大镜的图像,向人们展示可以点击图像来放大它(显然,没有放大镜这一点并不明显)。作者建议的一种技术是:
<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上留下了很多样本,所以你可以看到我是如何决定做这个样式的。注意,我降低了不透明度,这样你就可以透过放大镜看到
希望这有帮助
编辑:为了澄清你的例子-你可以忽略
可见性:隐藏
并杀死:悬停执行,如果您愿意,这正是我所做的。除非您使用
标记,该标记本身显示图像,否则仅使用纯CSS无法实现这一点。您还需要两个HTML元素——每个图片一个。这是因为通过CSS使元素显示图片的唯一方法是使用background image
属性,并且每个元素只能有一个背景图像。你选择哪两个元素以及如何定位它们取决于你。有许多方法可以将一个HTML元素置于另一个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); }
如果您希望它永久存在,您可能应该将它包含在原始thumnail中,或者使用JavaScript添加它,而不是将它添加到HTML中(这纯粹是样式,不应该包含在内容中)
如果您需要JavaScript方面的帮助,请告诉我。您可能需要查看本教程:
在其中,编写器使用空的span元素添加覆盖图像。如果您希望保持代码尽可能干净,可以使用jQuery注入上述span元素。上述文章中也给出了一个示例
希望这有帮助
-戴夫
使用CSS实现这一点的简单方法
仅在不修改内容的情况下
这里显示了带有附加标记的
(带代码和示例):
只要父元素不使用静态定位,这种方法就行。只需将其设置为相对定位即可。此外,在CSS3中,您可以执行以下操作:
.double-image {
background-image: url(images/img1.png), url(images/img2.png);
}
摘自我们想要的只是父母高于孩子。你就是这样做的
将img
放入span
,为两个元素设置z索引和位置
,为span设置额外的显示
。将鼠标悬停添加到span
,这样您就可以测试它并获得它
HTML:
下面是一种显示覆盖图像的好方法,该图像在图像链接上以半透明背景为中心:
HTML
下面是一个带有半透明背景的JQuery技术
HTML
app.js
var$overlay=$('');
var$image=$("是的,我认为它可能最终会成为一个绝对定位解决方案。我喜欢它的原因是,主图像仍然是一个图像,它不会成为背景图像。蒂姆K:你的代码看起来很好,除了CSS。引擎从右到左读取CSS。当你使用“a.gallerypic”时,它会首先显示“gallerypic”,然后再显示ecks如果“gallerypic”有一个“a”祖先。要解决这个问题,只需去掉“a”,就得到了“.gallerypic”。不需要前面的“a”。我认为还有一个问题没有解决,那就是您被迫使用display:block(而默认情况下图像是内联的)Matthieu先生,我对此表示高度怀疑。这实际上非常有效,能够在不改变标记的情况下完成这项工作真是太好了!请从这个URL粘贴代码,以防它下降。这应该是可以接受的答案。代码是:p{position:relative;display:block;}p:after{content:URL(放大.png);position:absolute;right:20px;top:20px;你的插件没有回答这个问题,虽然有点关联,但它并不是要求的。如果你使用:before或:after伪选择器,你可以只使用JavaScript添加html。这个答案显示了一种不在源代码中添加第二个html元素的方法
.double-image {
background-image: url(images/img1.png), url(images/img2.png);
}
<span><img src="/images/"></span>
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>
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;
}
<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>
/** 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();
});