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

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

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

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

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

Рис. 1

Рис. 2

Рис. 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 人, 加油