在HTML + CSS中将对象放置在图像上

Question

I'm making a spot-the-difference game in HTML, CSS + Javascript, but one of the problems I'm facing is that on a different resolution, the marker circles & hitboxes (basically just an image that links to a javascript function which fades in the marker circle) are all in the wrong places. 我正在用HTML，CSS + Javascript制作差异化游戏，但是我面临的问题之一是在不同的分辨率下，标记圈和点击框（基本上只是链接到javascript函数的图像在标记圈中逐渐消失）都放在错误的位置。

I'm using absolute positioning in CSS with percentage values. 我在CSS中使用带有百分比值的绝对定位。 The main image that the markers and hitboxes get overlaid on is 50% width and height of the page. 标记和命中框叠加的主要图像是页面宽度和高度的50％。

Thanks, 谢谢，

Niall. 尼尔

Edit: added info about the main image 编辑：添加了有关主图像的信息

Answer 1

Update : Your edit: 更新：您的编辑：

The main image that the markers and hitboxes get overlaid on is 50% width and height of the page. 标记和命中框叠加的主要图像是页面宽度和高度的50％。

...substantially changes the question. ...实质上改变了这个问题。 :-) My answer below about using pixel values for the overlays remains valid; :-)我下面关于将像素值用于叠加层的答案仍然有效； but calculating their positions becomes a nightmare because you can't know at design time what the actual width of the image will be. 但是计算它们的位置成为一场噩梦，因为您在设计时无法知道图像的实际宽度。 This means you have to find out what the actual width/height of the image is at runtime (eg, via JavaScript) and then adjust the pixel values you use for absolutely positioning everything else to account for that. 这意味着您必须找出运行时图像的实际宽度/高度（例如，通过JavaScript），然后调整用于绝对定位其他所有位置的像素值以解决该问题。

If you can avoid it (for instance, by just offering a few standard sizes), I'd recommend avoiding it. 如果可以避免这种情况（例如，仅提供一些标准尺寸），建议您避免使用。 If you can't, I'd recommend using a library (like jQuery , Prototype , YUI , Closure , or any of several others ) for discovering the actual computed width and height of the image. 如果不能，我建议您使用一个库（例如jQuery ， Prototype ， YUI ， Closure或其他几个库）来发现图像的实际计算出的宽度和高度。

Original answer : 原始答案 ：

I'm using absolute positioning in CSS with percentage values. 我在CSS中使用带有百分比值的绝对定位。

That would be the problem, then. 那就是问题所在。 If you want to accurately place something on top of an image, as the pixels in the image will be fixed, you'll want to use pixel values rather than percentages, like this ( live example ): 如果您想准确地在图像上放置一些东西，因为图像中的像素将被固定，您将需要使用像素值而不是百分比，如下所示（实时示例）：

CSS : 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: 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 个解决方案

解决方案1
1 已采纳 2010-11-28 16:10:17

在HTML + CSS中将对象放置在图像上

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-11-28 16:10:17

解决方案1
1 已采纳 2010-11-28 16:10:17