How to position a element to exact point on the background image?

Question

Background img shown as fig 1, requirement

1. Width cover mobile phone screen and height adaptive
2. Position number to exact point (like fig 2)

If changing fig 1 to fig 3, i can position the single line text to exact point. Please take a look in jsbin. But it did not truly solve the problem.

I have no idea how to do if background img just like fig 1. Any other ideas to to this? Thanks.

Fig 1

Fig 2

Fig 3

---

English is not my native language; please excuse typing errors.

Answer 1

Please forgive me for my unclear expression and thanks for your attention.

---

Finally, i find a solution by myself.

1. convert background image (shown as fig 1) to svg
2. use svg.js to position the things i want to exact point.

Please take a look in jsbin to see what exactly i want to position

Answer 2

I read your post and figured out that you wand something like that

Fig.1 in your background with numbers at their exact location on forground, like 20 in second line of yellow block of fig.2 and, 0 and 3 in second line of red block of fig.2

well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code

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

You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review

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