如何根据图像的来源将文本定位在图像上

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 设置为您正在叠加的 img 的 width 和 height 相同。（在 px）

如何根据图像的来源将文本定位在图像上

How to position text over an image based on the image's origin

html

css

text

overlay

position