在圖像上書寫 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%;
}

工作小提琴 - 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>