将对象定位在HTML + CSS中的图像上

我在HTML，CSS + Javascript中制作了一个点差异游戏，但是我面临的一个问题是在不同的分辨率下， & hitboxes（基本上只是一个图像，链接到一个javascript函数，在标记圈中淡出）都在错误的地方。将对象定位在HTML + CSS中的图像上

我在CSS中使用绝对定位和百分比值。标记和点击框重叠的主要图像是页面宽度和高度的50％。

谢谢，

Niall。

编辑：关于主图像

来源

2010-11-28 Niall

更新补充信息：您的编辑：

主要形象的标志物和hitboxes得到覆盖在50％的宽度和页面的高度。

...实质上改变了这个问题。 :-)我下面关于使用像素值进行叠加的答案仍然有效;但是计算它们的位置变成了一场噩梦，因为在设计时你无法知道图像的实际宽度。这意味着您必须在运行时（例如，通过JavaScript）找出图像的实际宽度/高度（例如，通过JavaScript），然后调整用于绝对定位其他所有内容的像素值。

如果你可以避免它（例如，只提供一些标准尺寸），我建议避免它。如果您不能，我建议使用库（如jQuery,Prototype,YUI,Closure或any of several others）来发现实际计算的图像宽度和高度。

原来的答复：

我使用绝对定位在CSS与百分比值。

那就是问题了。如果你想准确地放置在图像的顶部的东西，如图像中的像素将是固定的，你要使用的像素值，而不是百分比，像这样（live example）：

CSS：

#main { 
    /* Ensure that #main is an offset container */ 
    position: relative; 
} 
#main img { 
    /* Position the image at 0,0 */ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
#main div { 
    /* Position the div at 16,16 (middle of the 32x32 image */ 
    position: absolute; 
    left: 16px; 
    top: 16px; 
    background-color: white; 
    border: 1px solid black; 
    padding: 1px; 
}

HTML：

<body> 
    <p>Positioning example:</p> 
    <div id='main'> 
    <img src='http://www.gravatar.com/avatar/2f37f49d08a02f40fe0c86529969c47a?s=32&d=identicon&r=PG'> 
    <div>This starts half-way into and half-way down your gravatar</div> 
</body>

来源

2010-11-28 16:10:17

对不起，我的意思是我有主图像设定为50％的高度和宽度。我现在编辑我的问题。 – Niall 2010-11-28 16:23:46

将对象定位在HTML + CSS中的图像上

回答

相关问题