在图像上书写 HTML/Javascript

Question

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

我有这段代码，很好奇怎么才能在图片上写文字？我不需要修改图片文件本身，只需要在上面显示文字即可。

Answer 1

您需要使用相对位置的父级 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%;
}

工作 fiddle - https://jsfiddle.net/sdvwu95g/

Answer 2

你可以这样做

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>

Answer 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%;
    
    }

Answer 4

使用这个片段

*{
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>

在图像上书写 HTML/Javascript

Writing On Image HTML/Javascript

html

javascript

html5-canvas