Question

我正在用HTML，CSS + Javascript制作一个与众不同的游戏，但我面临的一个问题是，在不同的分辨率下，标记圈和＆amp; hitboxes（基本上只是链接到标记圈中淡入的javascript函数的图像）都在错误的位置。

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

谢谢，

尼尔。

编辑：添加了有关主图像的信息

Answer 1

更新：您的修改：

标记和命中框叠加的主图像是页面宽度和高度的50％。

......实质上改变了这个问题。 :-)我在下面关于使用叠加像素值的答案仍然有效;但是计算它们的位置会变成一场噩梦，因为你无法在设计时知道图像的实际宽度是多少。这意味着您必须找出图像的实际宽度/高度在运行时（例如，通过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>

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

1 个答案: