在图像上添加文本

Question

我目前有一些代码，其中包含一个表单，只要提交文本，该表单就会生成一个值，该值会显示在网页上。我的问题是，提交后，我希望该值出现在文本字段上方的图像中。

这是我的JavaScript代码

var list = document.querySelector('ul');
  var input = document.querySelector('input');
  var button = document.querySelector('button');
  button.onclick = function() {
    var myItem = input.value;
    input.value = '';
    var listItem = document.createElement('li');
    var listText = document.createElement('span');
    var listBtn = document.createElement('button');
    listItem.appendChild(listText);
    listText.textContent = myItem;
    listItem.appendChild(listBtn);
    listBtn.textContent = 'Delete';
    list.appendChild(listItem);
    listBtn.onclick = function(e) {
      list.removeChild(listItem);
    }
    input.focus();
  }

Answer 1

您可以查看此链接，他们有一个示例，您可以在其中将文本放置在图像https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center的中心。

.container {
  position: relative;
}

.center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

Answer 2

在询问和分享一些屏幕截图时，请更加具体。在这种情况下，我会说您可以使用“绝对位置”以便在图像上覆盖文本。

 .text_div{
    position:absolute;
    top:10%;
    left:30%;
 }