javascript - 在 JavaScript 中将文本放在图像上

Question

我有以下代码:

    var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
    var results_list = document.getElementById('list_results');
    var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
    var markerIcon = MARKER_PATH + markerLetter + '.png';

    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');

    icon.src = markerIcon;
    icon.setAttribute('class', 'placeIcon');
    icon.setAttribute('className', 'placeIcon');
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results_list.appendChild(tr);

这个 MARKER_PATH 只有字母表字母，从 A 到 Z 不足以容纳 60 个项目。我喜欢在标记内包含数字。我可以创建 60 张图像并在本地加载它们，但是所有这些图像都会被杀死。因此，

我只想创建 1 张图像并在该图像上放置一个数字作为文本。我该怎么做？

Answer 1

只需在 td 上放置一个带有 css 背景指向图像图标的类，然后像这样迭代，(您可以运行我创建的这个片段):

var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
    var results_list = document.getElementById('list_results');
    var markerLetter = "";
  

var i;
for (i = 0; i < 60; i++) { 
  
    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    

    
    iconTd.setAttribute('class', 'mybackground');
    
    
    var name = document.createElement('div');
    name.innerHTML = 's'+i;
  
  iconTd.innerHTML = ""+i;
  nameTd.innerHTML = "Title "+i;
    

    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
  
    results_list.appendChild(tr);
  
  }

td.mybackground{ 
background-image: url(http://www.whitehousewhitetails.com/wp-content/uploads/2012/02/google_pin.png); /* forward slash for the path */ 
width: 25px; /* use you own image size; */ 
height: 46px; /* use you own image size; */ 
background-repeat: no-repeat; 
background-position: left top; 
text-align: center; 
vertical-align: top;
  font-size: 40px;
  color:blue;
  
}

<table id="list_results" border="1">
<tr><td>img</td>
<td>description</td>
  </tr>  
</table>