时间戳

首页 > 解决方案 > 在图像 HTML/Javascript 上书写

javascript - 在图像 HTML/Javascript 上书写

问题描述

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

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

标签： javascripthtmlhtml5-canvas

解决方案

您需要使用一个相对位置的父 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/

推荐阅读