Я проверил другие сообщения, но никто не упоминал о точном местоположении для наложения.
Подумайте, что у меня есть изображение, например. светофор. Мне нужно наложить (не уверен, что это правильный термин или нет), например, над точным расположением зеленой лампы. Это так, что я могу анимировать div через jQuery, чтобы изменить цвет div, чтобы иметь эффект, который анимация анимации.
Теперь проблема заключается в том, как быть точным в этом, так что расположение div полностью соответствует той части изображения? Означает ли это необходимость измерения пикселей перед установкой верхней и левой частей div? Или есть более умный способ? Я рассмотрел другие варианты, такие как использование холста (или svg или silverlight), чтобы перерисовать всю вещь вместо того, чтобы вставлять изображение (т.е. Перерисовать совершенно новое изображение светофора). Однако для этого я считаю, что это будет более сложным, чем то, что я спросил. Поправьте меня, если я ошибаюсь.
Пожалуйста, порекомендуйте.
Один из способов заключается в том, чтобы поместить изображение внутри div, которое либо расположено относительно друг друга, если вы хотите, чтобы оно было встроено с другими элементами или позиционировалось как абсолютное, если вы хотите установить его положение на странице. Затем поместите абсолютно перекрывающийся div внутри того же div, что и изображение.
например
Стили
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
тело
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
Вам нужно будет отрегулировать ширину, высоту, левый и верхний части div с id = 'over' по мере необходимости.
Вы можете заменить div id = 'over', используя позицию изображения, абсолютную на этом изображении, и при необходимости установите слева и вверх.