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

Question

背景img如图1所示，要求

1. 宽度覆盖手机屏幕和高度自适应
2. 位置编号与确切点（如图2）

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

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



图1



图2



图3

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

Answer 1

请原谅我表达不清楚并感谢您的关注。

最后，我自己找到了解决方案。

1. 将背景图片（如图1所示）转换为svg
2. 使用svg.js来定位我想要的东西。

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

Answer 2

我看了你的帖子，发现你有这样的东西

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

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

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

你可以通过使用图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>

Answer 3

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

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

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

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

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

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