如何在HTML中定位一个图像?

我是一个初学者在rails编程,尝试在页面上显示许多图像。 一些图像是在别人之上。 简单点说,我想要一个蓝色方块,在蓝色方块的右上angular有一个红色方块(但不是在angular落里)。 我试图避免合成(与ImageMagick和类似)由于性能问题。

我只想定位相互重叠的图像。

作为一个更困难的例子,设想一个里程表放置在一个更大的图像。 对于六位数字,我需要合成一百万张不同的图像,或者一次就完成,所需要的就是将六张图像放在另一张图像的上面。

好的,过了一段时间,下面是我所着的:

.parent { position: relative; top: 0; left: 0; } .image1 { position: relative; top: 0; left: 0; } .image2 { position: absolute; top: 30px; left: 70px; } 
 <div class="parent"> <img class="image1" src="https://placehold.it/50" /> <img class="image2" src="https://placehold.it/100" /> </div> 

这是我所做的将一幅图像漂浮在另一幅图像上的准确expression。

 img { position: absolute; top: 25px; left: 25px; } .imgA1 { z-index: 1; } .imgB1 { z-index: 3; } 
 <img class="imgA1" src="https://placehold.it/200/333333"> <img class="imgB1" src="https://placehold.it/100"> 

这是可能给你的想法的代码:

 <style> .containerdiv { float: left; position: relative; } .cornerimage { position: absolute; top: 0; right: 0; } </style> <div class="containerdiv"> <img border="0" src="https://www.google.comhttp://img.dovov.combranding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="""> <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt=""> <div> 

的jsfiddle

我怀疑Espo的解决scheme可能不方便,因为它要求你绝对地定位两个图像。 你可能希望第一个把自己定位在stream程中。

通常,有一种自然的方式就是CSS。 你把位置:相对于容器元素,然后绝对地把孩子放在里面。 不幸的是,你不能把一个图像放在另一个图像里。 这就是为什么我需要容器分区。 请注意,我把它作为一个浮动,使其自动适应其内容。 使其显示:内联块应理论上也可以工作,但浏览器支持差。

编辑:我从图像中删除大小属性来更好地说明我的观点。 如果您希望容器图像具有其默认大小,并且事先不知道大小,则无法使用背景技巧 。 如果你这样做,这是一个更好的方式去。

我注意到的一个问题可能会导致错误是在rrichter的答案,下面的代码:

 <img src="b.jpg" style="position: absolute; top: 30; left: 70;"/> 

应该在样式中包含px单位。

 <img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/> 

除此之外,答案工作正常。 谢谢。

你可以绝对地定位相对于它们的父元素的pseudo elements

这为您提供了两个额外的层面来处理每个元素 – 因此将一个图像放置在另一个图像上变得很容易 – 使用最less的和语义标记(没有空的div等)。

标记:

 <div class="overlap"></div> 

CSS:

 .overlap { width: 100px; height: 100px; position: relative; background-color: blue; } .overlap:after { content: ''; position: absolute; width: 20px; height: 20px; top: 5px; left: 5px; background-color: red; } 

这是一个现场演示

内联样式仅用于清晰。 使用一个真正的CSS样式表。

 <!-- First, your background image is a DIV with a background image style applied, not a IMG tag. --> <div style="background-image:url(YourBackgroundImage);"> <!-- Second, create a placeholder div to assist in positioning the other images. This is relative to the background div. --> <div style="position: relative; left: 0; top: 0;"> <!-- Now you can place your IMG tags, and position them relative to the container we just made --> <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/> </div> </div> 

简单的方法是使用background-image,然后在该元素中放置一个<img>。

另一种方法是使用CSS图层。 有很多可用的资源可以帮助你,只需要searchCSS层 。

@ buti-oxa:不要迂腐,但你的代码是无效的。 HTML widthheight属性不允许单位; 你可能会想到CSS width:height:属性。 您还应该使用<style>标签提供内容types( text/css ;请参阅Espo的代码)。

 <style type="text/css"> .containerdiv { float: left; position: relative; } .cornerimage { position: absolute; top: 0; right: 0; } </style> <div class="containerdiv"> <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100"> <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40"> <div> 

离开px;widthheight属性可能会导致渲染引擎畏缩。