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

Question

18

要求背景图片宽度覆盖手机屏幕且高度自适应，将其定位到准确的位置（如图2）。

如果将图1更改为图3，则可以将单行文本定位到准确的位置。请在jsbin中查看（链接）。但这并没有真正解决问题。

我不知道如何处理像图1这样的背景图片。还有其他想法吗？谢谢。

图1

图2

图3

- Liu Dongyu

1

转换为svg，插入<span>标签用于文本，创建具有响应式svg的页面（类似于这个或那个的大量信息）。 - imbearr

你到底想要什么？我认为你想把前端文本放在背景图像上。 - Abhay Singh

你能重新表达一下这个问题吗？我不太确定你想要什么。 - Jan_dh

请原谅我表达不够清晰。简而言之，如图1所示，我想将“0”定位到“已邀请人”，并将“3”定位到“还差人”。我表达清楚了吗？ - Liu Dongyu

你想要固定的背景还是其他的？你能用图片或其他方式解释一下吗？ - Teymur Mardaliyer Lennon

显示剩余3条评论

3个回答

1

我阅读了您的帖子，并发现您想要类似于以下内容：

在您的背景中，数字以其准确位置显示在前景中，例如在图2的黄色块的第二行中的20，以及在图2的红色块的第二行中的0和3（如图1所示）。

在您提供的jsbin代码中，您使用了图3，并使用代码将文本定位在图像上。

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

您可以使用图1，只在div中编写数字文本，然后通过添加margin left来定位div，或者您可以使用span来编写数字，或者只需进行快速查看。

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

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

- Junaid Amjad

0

您的背景图中有数字在前景图中的精确位置，例如图2黄色块的第二行中的20和红色块的第二行中的0和3。

在您提供的jsbin代码中，您使用了图3并使用代码将文本定位在其上。

您可以通过使用图1并仅编写文本数字来执行相同的操作，在div中只需通过添加左边距来定位您的div，或者您可以使用span编写您的数字，或者您可以仅进行快速查看。

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

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

- Rafael Portela

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Liu Dongyu · Accepted Answer

非常抱歉我的表达不够清晰，感谢您的关注。

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