javascript - 在图像上添加文字

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>