Размещение объекта над изображением в HTML + CSS - PullRequest
Новая
       17

Размещение объекта над изображением в HTML + CSS

0 голосов
/ 28 ноября 2010

Я делаю отличную игру на HTML, CSS + Javascript, но одна из проблем, с которой я сталкиваюсь, заключается в том, что при другом разрешении маркеры окружают и хитбоксы (в основном просто изображение, которое ссылается на все функции javascript, которые исчезают в круге маркера) находятся в неправильных местах.

Я использую абсолютное позиционирование в CSS с процентными значениями. Основное изображение, на которое накладываются маркеры и хитбоксы, - это 50% ширины и высоты страницы.

Спасибо

Найл.

Редактировать: добавлена ​​информация об основном изображении

1 Ответ

1 голос
/ 28 ноября 2010

Обновление : Ваше редактирование:

Основное изображение, на которое накладываются маркеры и хитбоксы, - это 50% ширины и высоты страницы.

... существенно меняет вопрос. :-) Мой ответ ниже об использовании значений пикселей для наложений остается в силе; но вычисление их положения становится кошмаром, потому что вы не можете знать во время разработки, какова будет реальная ширина изображения. Это означает, что вы должны выяснить, какова фактическая ширина / высота изображения во время выполнения (например, с помощью JavaScript), а затем отрегулировать значения пикселей, которые вы используете, для абсолютного позиционирования всего остального, чтобы учитывать это.

Если вы можете избежать этого (например, просто предлагая несколько стандартных размеров), я бы рекомендовал избегать этого. Если вы не можете, я бы рекомендовал использовать библиотеку (например, jQuery , Прототип , YUI , Закрытие или любой из нескольких других ) для определения фактической вычисленной ширины и высоты изображения.

Оригинальный ответ :

Я использую абсолютное позиционирование в 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>
...