在图像 HTML/Javascript 上书写答案

【问题标题】：Writing On Image HTML/Javascript在图像 HTML/Javascript 上书写
【发布时间】：2021-06-25 02:45:59
【问题描述】：

<a href="#">
  <img class="img img-responsive" src="'black-box.png"/>
</a>

我有这段代码，我很好奇如何在图像上写文字？我不需要修改图片文件本身，只需要在上面显示文字。

【问题讨论】：

你会使用相对定位的元素来做到这一点

标签： javascript html html5-canvas

【解决方案1】：

你可以这样做

div {
  position: relative;
  display: inline-block;
}

P {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div>
  <img alt="this is an alt" src="https://picsum.photos/500/300">
  <p> this is text </p>
</div>

【讨论】：

有没有办法让文本在溢出到下一行之前每行更多？目前，每行可容纳的文字不多
@FlyingCitrus101 你可以在 p 上设置一个max-width 然后它会自动换行。

【解决方案2】：

您需要使用一个相对位置的父 div，并且您的文本 div 的位置需要是绝对的。

<div class="container">

<a href="#">
  <img class="img img-responsive" src="https://picsum.photos/id/1/200/300"/>
</a>

<div class="text">
    test
</div>

</div>

.container {
   position: relative;
   text-align: center;
}
.text {
   position: absolute;
   top: 50%;
   left: 50%;
}

工作小提琴 - https://jsfiddle.net/sdvwu95g/

【讨论】：

【解决方案3】：

<a href="#"><span id="img-text"> your text </span>
      <img class="img img-responsive" src="https://picsum.photos/id/1/200/300"/>
    </a>
    
    #img-text {
    
      position: absolute;
      top: 50%;
      left:50%;
    
    }

【讨论】：

【解决方案4】：

使用这个sn-p

*{
margin:0;
padding:0;
}
div{
position: relative;
width: 100%;
height: auto;
text-align: center;
}
.img{
position: relative;
margin-top: 10px;
width: 100%;
height:auto;
}

<div>
<span>This is my text</span>
<a href="#">
  <img class="img img-responsive" src="your image"/>
</a>
</div>

【讨论】：