Как позиционировать элемент для точной точки на фоновом изображении?

Фон img, показанный на рис. 1, требование

  • Ширина крышки экрана мобильного телефона и адаптивной высоты.
  • Номер позиции до точной точки (например, рис. 2)

Если изменить рисунок 1 на рис. 3, я смогу позиционировать текст отдельной строки на точную точку. Обратите внимание на jsbin. Но это действительно не решило проблему.

Я понятия не имею, как это сделать, если фон img точно так же, как рис 1. Любые другие идеи? Благодарю.

64dd366a-6ed5-11e6-99e0-5aebacb7c8ab.png

Рис. 1

2d20ad70-6ecf-11e6-85c0-d3e728507b33.png

Рис. 2

a6623a8e-6e1e-11e6-9f6e-1239bc4ee4ea.png

Рис. 3

Английский язык не мой родной язык; пожалуйста, извините ошибки ввода.

Ответы

Ответ 1

Пожалуйста, простите меня за мое неясное выражение и спасибо за внимание.

Наконец, я нахожу решение самостоятельно.

  • конвертировать фоновое изображение (показано на рис. 1) в svg
  • используйте svg.js, чтобы расположить вещи, которые я хочу точно указать.

Пожалуйста, посмотрите в jsbin, чтобы узнать, что именно я хочу разместить

Ответ 2

Я прочитал ваш пост и понял, что вы что-то вроде этого

Рис .1 в вашем заднем плане с цифрами в точном месте на поле,  как 20 во второй строке желтого блока на фиг .2 и, 0 и 3  во второй строке красного блока рис .2.

в коде, который вы указали в jsbin, вы используете fig.3 и позиционируете текст на нем с кодом

<div class="chance-msg">还有20次机会，分享即可领取红包</div>
<div class="invite-msg">已邀请0人，还差3人，加油</div>

Вы можете сделать то же самое, используя рис. 1 и набирая только текстовые числа в div, вам нужно только расположить свой div, добавив маржу слева или вы можете использовать диапазон для записи своих номеров, или вы можете просто сделать это для быстрый обзор

<div class="chance-msg"><span style="visibility:hidden">还有</span>20<span style="visibility:hidden">次机会，分享即可领取红包<span></div> <div class="invite-msg"><span style="visibility:hidden">已邀请</span>0<span style="visibility:hidden">人，还差</span>3<span style="visibility:hidden">人，加油</span></div>

Ответ 3

Рис .1 на заднем плане с цифрами в точном месте на переднем плане, например 20 во второй строке желтого блока на рис .2 и, 0 и 3 во второй строке красного блока на рис .2

ну в коде, который вы дали в jsbin, вы используете fig.3 и позиционируете текст на нем с кодом

还有 20 次 机会, 分享 即可 领取 红包 已 邀请 0 人, 还差 3 人, 加油

Вы можете сделать то же самое, используя рис. 1 и набирая только текстовые числа в div, вам нужно только расположить свой div, добавив маржу слева или вы можете использовать диапазон для записи своих номеров, или вы можете просто сделать это для быстрый обзор

还有 20 次 机会, 分享 即可 领取 红包

已 邀请 0 人, 还差 3 人, 加油