如何在HTML中将一个图像放在另一个图像上？

Question

我是rails编程的初学者,试图在页面上显示许多图像.有些图像要放在其他图像之上.为了简单起见,我想要一个蓝色正方形,蓝色正方形的右上角有一个红色正方形(但在角落里不紧).由于性能问题,我试图避免合成(使用ImageMagick和类似).

我只想将重叠的图像相对于彼此放置.

作为一个更难的例子,想象一下里程表放在一个更大的图像内.对于六位数字,我需要合成一百万个不同的图像,或者在运行中完成所有操作,其中所需要的只是将六个图像放在另一个图像的顶部.

Answer 1

好的,过了一段时间,这是我登陆的:

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

作为最简单的解决方案.那是:

创建放置在页面流中的相对div; 首先将基本图像作为相对图像放置,以便div知道它应该有多大; 将叠加层设置为相对于第一个图像左上角的绝对值.诀窍是让亲戚和绝对正确.

Answer 2

这是一个准确的看看我做了什么来将一个图像浮动到另一个图像上.

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">

资源

Answer 3

这里的代码可能会给你一些想法:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

的jsfiddle

我怀疑Espo的解决方案可能不方便,因为它要求你绝对定位两个图像.您可能希望第一个将自己定位在流程中.

通常,有一种自然的方法就是使用CSS.你将position:relative放在容器元素上,然后绝对将子元素放在其中.不幸的是,你不能把一个图像放在另一个图像中.这就是我需要容器div的原因.请注意,我使它成为一个浮点数,使其自动调整其内容.让它显示:内联块在理论上应该也可以工作,但浏览器支持很差.

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

Answer 4

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

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

应包括样式中的px单位,例如.

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

除此之外,答案很好.谢谢.

Answer 5

您可以绝对pseudo elements相对于其父元素定位.

这为每个元素提供了两个额外的层 - 所以将一个图像放在另一个图像上变得很容易 - 只需要最小的语义标记(没有空的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;
}

这是一个现场演示

Answer 6

可能有点晚了，但为此你可以这样做：

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

Answer 7

简单的方法是使用background-image,然后在该元素中添加<img>.

另一种方法是使用css层.有很多资源可以帮助您解决这个问题,只需搜索css图层.

Answer 8

内联样式仅为清晰起见.使用真正的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>