如何根据图像的原点在图像上放置文本

Question

我有一张像这样以页面为中心的图片：

我想在每个图像文本上放置段落文本。我的第一个想法是使用position: absolute 和position: relative。我使用 div 来包装我的图像和所有文本：

<div class="content-wrapper">
    <img src="SBDrawing.png" />
    
    <p id="D">D</p>
    <p id="d">d</p>
    <p id="H">H</p>
    <p id="D1">D1</p>
    <p id="D2">D2</p>
    <p id="n-dn">n-dn</p>
    <p id="n1">n1</p>
    <p id="d3">d3</p>
    <p id="DL">DL</p>
    <p id="dl">d1</p>
    <p id="H1">H1</p>
    <p id="h">h</p>
    <p id="b">b</p>
    <p id="Da">Da</p>
</div>

并使用了这个 CSS：

  .content-wrapper{ 
       position: relative;
       height: 100%;
       width: 100%;
  }
  
  p{
   position: absolute;
  }
 
  #D{
    top:220px;
    left:310px; 
  }
  
  #H{
    top:320px;
    left:180px;
    transform: rotate(-90deg);  
  }
  
  #D1{
    top:245px;
    left:260px; 
  }
  
  #D2{
    top:280px;
    left:55px;  
  }
  
  #n-dn{
    top:215px;
    left:80px;  
  }
  
  #n1{
    top:280px;
    left:200px;
    transform: rotate(-90deg);  
  }
  
  #D3{
    top:245px;
    left:5px;   
  }
  
  #DL{
    top:255px;
    left:30px;  
  }
  
  #dl{
    top:245px;
    left:260px; 
  }
  
  #H1{
    top:295px;
    left:180px; 
    transform: rotate(-90deg);
  }
  
  #h{
    top:35px;
    left:120px;
    transform: rotate(-90deg);  
  }
  
  #b{
    top:35px;
    left:185px;
    transform: rotate(-90deg);
  }
  
  #Da{
    top:215px;
    left:330px; 
  }

只有前两种样式很重要，其余的用于定位文本。仅供参考，top 和 left 值应该是指图像的原点（图像的左上角）。

我将照片导入 Photoshop 并使用“信息”选项卡来查找每个段落标签的坐标。我以为一切都很好，但没有：

您可以看到有些重叠，有些甚至不靠近图像（查看页脚）。有人可以找到问题吗？我会给你15个代表！接受您的回答...

Answer 1

1 - 为了让您定位所有元素并且不让它们移出位置，您需要图像不改变大小。持有图像的content-wrapper 不能使用百分比作为大小，因为它将根据其父元素调整大小。为content-wrapper 使用设置的宽度和高度。

2 - 使用可以显示的最大测量值将测量值硬编码到 html 中。

3 - 在您的 css 中，将 text-align: right 添加到保存测量值的元素中。

4 - 调整每个元素的 top 和 left 数字，直到它们位于您想要的位置。

5 - 从 html 中删除硬编码的测量文本。

Answer 2

蝙蝠侠的大错特错！

这个：

<p id="dl">d1<p>

与 css 不匹配

     #D1{
    top:245px;
    left:260px; 
  }

这个：

 <p id="d3">d3<p>

不匹配

  #d3{
    top:245px;
    left:5px;
  }

尝试将您的包装器设置为您当前拥有的固定大小：

.content-wrapper{ 
       position: relative;
       height: 100%;
       width: 100%;
  }

你所有的<p>标签都是一个绝对值，它不能正常工作，而是将div的width和height设置为与width和height相同的@987654331 @你正在覆盖。 （在px）