HTML,CSS - 图像里面的图像,怎么做？

Question

我有这段HTML代码:

<div>
  <div>
    <image src="image-inside-pic-png.png" alt="">
  </div>
  <image src="pic.png" alt="" />
</div>

所述pic.png(300×300像素)是主图像.我想把image-inside-pic-png.png(20x20像素)放在里面.当我申请职位时:绝对; 在小图像上,它只是暂时的.如果我改变其中任何一个的大小,它就不再起作用了.

所以我的问题是,如何在大图像中始终移动小图像 - 这个小图像将从顶部开始是15px,从大图像的右边缘开始是30px？

谢谢你的帮助

Answer 1

我认为这应该有效:

HTML:

<div>
  <img src="image-inside-pic-png.png" alt="" class="inner-image"/>
  <img src="pic.png" alt="" />
</div>

CSS:

div {
  position: relative;
}

.inner-image {
  position: absolute;
  top: 15px;
  right: 30px;
}

无论如何,请确保您需要使用HTML执行此操作.也许用Photoshop或Gimp简单地编辑图像会更好.或者也许一个图像仅用于样式目的,那么你应该使用CSS.

Answer 2

在不改变标记的情况下,这可以实现,例如使用display:inline-block最外层的div元素(因此它不会延伸100%的可用宽度)和relative + absolute最外层div和缩略图的位置

看到这个小提琴:http://jsfiddle.net/cRqhT/3/
边框和图像大小是为了简单而定义的