Question

我想要将两张图像直接放在彼此的顶部。这个HTML经常由脚本生成，因此我将CSS直接包含在HTML本身中。

<div style="text-align:center">
<img id="background" 
style="position: absolute; z-index: 1; " 
src="background.png"/>
<img id="foreground" 
style="position: relative; z-index: 10; " 
src="foreground.png" border="0" usemap="#map"/>
</div>

除了Chrome之外，它的效果非常好。在Firefox和Internet Explorer中，它可以100％的时间工作，我可以坐下来点击刷新，这很好。在Chrome浏览器中有时会在页面加载或刷新背景图像时向右移动50％？我只是做了一个快速测试和5/10次（一半的时间）它会在刷新时向右移动。有没有人有任何想法可能导致这个？

Answer 1

假设您的前景和背景图片大小相同，似乎您尝试这样做：

<img id="foreground" style="margin-left:auto; margin-right:auto; background:url(&quot;background.png&quot;);" src="foreground.png" usemap="#map"/>

margin-left:auto; margin-right:auto;会将图片置于其父元素中心。

Chrome和Firefox之间的图像定位不同

1 个答案: