在JavaScript中将文本放置在图像上

我有以下代码：

    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);

这个标记_路径只有字母，这对于从A-Z开始的60个项目来说是不够的。我喜欢在标记中有数字。我可以创建60个图像并在本地加载它们，但是如果所有这些图像都是这样的话，那就太麻烦了。所以,

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

---

只需在td上放置一个css背景指向图像图标的类，然后像这样迭代（您可以运行我创建的这个代码段）：

var-MARKER\u-PATH='1〕https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
var results_list=document.getElementById（'list_results'）；
var markerLetter=“”；
var i；
对于（i=0；i<60；i++）{
var tr=document.createElement（'tr'）；
tr.style.backgroundColor=（i%2==0？'#f0f0'：'#FFFFFF'）；
var iconTd=document.createElement（'td'）；
var nameTd=document.createElement（'td'）；
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）；
结果(tr)；
}

td.mybackground{
背景图片：url(http://www.whitehousewhitetails.com/wp-content/uploads/2012/02/google_pin.png)；/*路径的正斜杠*/
宽度：25px；/*使用您自己的图像大小；*/
高度：46px；/*使用您自己的图像大小；*/
背景重复：无重复；
背景位置：左上；
文本对齐：居中；
垂直对齐：顶部；
字体大小：40px；
颜色：蓝色；
}

img
描述

@APerson，谢谢您的编辑。我很感激你使用“新”标签做什么？（限于单个字符）。啊，但是你想把它放在“侧边栏”里。这个问题真的与我无关。@geocodezip，谢谢你的评论。这和我到目前为止得到的没有什么不同。A-Z只有26个字母，因为我有60个字母。哦，你救了我的命。我花了一整天的时间盯着我的代码睡着了。虽然数字是巨大的，但我可以和他们玩，使它正确。非常感谢你的帮助！很抱歉再次打扰你。我在尝试将本地图像放置到背景图像时遇到了一个小问题。在css中，我使用var image='marker_icon.png'；它是有效的。我尝试过使用url（marker_icon.png）；用于此背景图像，但它不起作用。您知道如何将本地图像放置到此背景图像中吗？多谢了，唯一可能的问题是图像与您正在执行的文件不在同一目录下…您是单独运行css代码还是在同一html页面上…图像是否位于html页面的同一文件夹上？…PS：您不必在JS上使用任何var，只需使用css端的url即可（我忘了从JS代码中删除url链接）我在网上找到了一个解决方案。对于本地图像，使用background:url（marker_list）；有点奇怪，但它可以工作。谢谢