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

发布于 2024-10-05 00:56:32 字数 228 浏览 3 评论 0原文

我正在用 HTML、CSS + Javascript 制作一款找茬游戏，但我面临的问题之一是，在不同的分辨率下，标记圆圈和圆圈会出现变化。 hitbox（基本上只是链接到在标记圈中淡出的 javascript 函数的图像）都位于错误的位置。

我在 CSS 中使用绝对定位和百分比值。标记和命中框覆盖的主图像占页面宽度和高度的 50%。

谢谢，

尼尔。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

芸娘子的小脾气 2024-10-12 00:56:32

更新：您的编辑：

标记和命中框覆盖的主图像占页面宽度和高度的 50%。

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

如果您可以避免它（例如，仅提供一些标准尺寸），我建议避免它。如果不能，我建议使用库（例如 jQuery、原型，YUI，关闭，或任何其他几个）用于发现图像的实际计算宽度和高度。

原始答案：

我在 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:

<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>

Update: Your edit:

The main image that the markers and hitboxes get overlaid on is 50% width and height of the page.

...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 (e.g., via JavaScript) and then adjust the pixel values you use for absolutely positioning everything else to account for that.

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.

Original answer:

I'm using absolute positioning in CSS with percentage values.

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:

#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>

回复收藏 0 原文

~没有更多了~