Question

我想将透明的.png图像准确地放在另一个图像上，让我们说.jpeg

这是我的代码：

<img src='someimage.jpg' width='480px' height='360px' /> 
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />

它适用于Chrome，Safari和新版本的Firefox。在旧版本的Firefox中，在IE的所有版本中它都不起作用 - 而是在.jpeg图像上方的右侧显示透明图像。

有人可以帮我解决这个问题吗？

由于

托比

Answer 1

这是确保图像相互叠加的更简单方法：

<div id="image-combo">
  <img src="someimage.jpg" style="width: 480px; height: 360px" />
  <img src="someother.png" style="width: 480px; height: 360px" />
</div>

这是CSS：

#image-combo {
    position: relative;
    width: 480px;
    height: 360px;
}

#image-combo img {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

我不相信这是一个浏览器问题。这是窗口大小问题......

你真的有两个480像素的图像彼此相邻，所以它取决于你的浏览器窗口的宽度。

如果您的窗口宽度小于960像素，则代码可以正常工作，因为第二张图像会换行到第一张图像下的线条。

如果窗口的宽度超过960像素，则您的代码将无法正常工作，因为第二张图片只是位于第一张图像的右侧。您的代码将第二张图像向上移动，使第二张图像位于右侧，负边距将其向上移动到第一张图像的精确高度。

快速修复将在两个图像之间插入换行符<br />，以确保第二个图像始终位于第一个图像下方。此外，img和width的{{1}}属性中不应该是“px”，因此请删除它们。

height

可能有更优雅的解决方案，比如使用容器<img src='someimage.jpg' width='480' height='360' /><br /> <img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />，但是如果没有看到其余代码的上下文，就不可能说出什么是最好的。

透明的.png图像在firefox / IE中的另一个图像上的问题

2 个答案: