如何将元素定位到背景图像上的精确点？

Background img shown as fig 1, requirement

背景img如图1所示，要求

1. Width cover mobile phone screen and height adaptive
2. 宽度覆盖手机屏幕和高度自适应
3. Position number to exact point (like fig 2)
4. 位置编号到精确点（如图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.

如果将图1更改为图3，我可以将单行文本定位到精确点。请看看jsbin。但它并没有真正解决问题。

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

我不知道如果背景img如图1所示该怎么做。还有其他想法吗？谢谢。

Fig 1

图。1

Fig 2

图2

Fig 3

图3

---

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

英语不是我的母语;请原谅输入错误。

3 个解决方案

#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. 将背景图像（如图1所示）转换为svg
3. use svg.js to position the things i want to exact point.
4. 使用svg.js来定位我想要的东西。

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

请查看jsbin以了解我想要的位置

#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

图1在你的背景中，数字位于地面上的确切位置，如图2中黄色方块的第二行中的20，以及图2中红色方块第二行中的0和3

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

你在jsbin给出的代码中你正在使用fig.3并用代码定位文本

<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

您可以通过使用图1来做同样的事情，并且只在div中编写仅文本数字，您只需要通过添加边距来定位您的div，或者您可以使用span来编写您的数字，或者您可以这样做以便快速查看

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

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

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

风格=>

#3

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

图1在你的背景中，数字位于地面上的确切位置，如图2中黄色方块的第二行中的20，以及图2中红色方块第二行中的0和3

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

你在jsbin给出的代码中你正在使用fig.3并用代码定位文本

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

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

您可以通过使用图1来做同样的事情，并且只在div中编写仅文本数字，您只需要通过添加边距来定位您的div，或者您可以使用span来编写您的数字，或者您可以这样做以便快速查看

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

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

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