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

我想把一个透明的.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图像上方

---

有人能给我一个解决办法吗？

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

实际上，两个480像素的图像相邻，这取决于浏览器窗口的宽度

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

如果窗口宽度超过960像素，那么代码将无法正常工作，并且会如您所描述的那样失败，因为第二个图像仅位于第一个图像的右侧。代码将第二个图像向上移动，使第二个图像位于右侧，负边距将其向上移动到第一个图像的确切高度

快速修复方法是在两个图像之间插入换行符，以确保第二个图像始终低于第一个图像。另外，在

宽度

和

高度

的

img

属性中不应该有“px”，因此请删除这些属性

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

---

可能还有更优雅的解决方案，比如使用container

，但是如果不了解代码其余部分的上下文，就不可能说什么是最好的。

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

实际上，两个480像素的图像相邻，这取决于浏览器窗口的宽度

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

如果窗口宽度超过960像素，那么代码将无法正常工作，并且会如您所描述的那样失败，因为第二个图像仅位于第一个图像的右侧。代码将第二个图像向上移动，使第二个图像位于右侧，负边距将其向上移动到第一个图像的确切高度

快速修复方法是在两个图像之间插入换行符，以确保第二个图像始终低于第一个图像。另外，在

宽度

和

高度

的

img

属性中不应该有“px”，因此请删除这些属性

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

---

可能还有更优雅的解决方案，比如使用container

，但如果看不到代码其余部分的上下文，就不可能说什么是最好的。

这里有一种更简单的方法来确保图像相互重叠：

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

---

这里有一种更简单的方法来确保图像相互重叠：

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

---

你能不能更清楚地定义“它不起作用”？当然，现在完成了，我希望你能理解。你能更清楚地定义“它不起作用”？当然，现在完成了，我希望你能理解我喜欢这个div容器解决方案（+1），但单是加载顺序就可以确保png位于jpg之上吗？是的，我喜欢这个div容器解决方案（+1），但是仅仅加载顺序就能确保png位于jpg之上吗？是的，除非你弄乱了z索引。