0

我正在使用 HTML5+Javascript 设计移动网页。我通过 javascript 动态添加了一个图像。但是，当我尝试在该图像上动态设置文本时，它不起作用。

我希望文本出现在图像上。我的代码是；

  <script>
  for(var i=0;i<5;i++) {
  var ele = document.getElementById('container');
  var table = document.createElement('table');
  table.className = 'c1';
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  /* image added dynamically */
  var img = new Image();
  img.src = "Images/car.jpeg";
  img.className = 'c3';
  var txt = document.createTextNode('IE8');

  td.appendChild(img);
  img.appendChild(txt);
  tr.appendChild(td);
  table.appendChild(tr);
  ele.appendChild(table);
  }

  <style> .img{height:50px;width:50px;}
  .c1 {height:60px; width:100px;} 
  </style>
  <body id='container'></body>

我尝试添加一个 div 组件，然后向其中添加文本 + 背景图像。它也不起作用。

4

2 回答 2

2

更好的选择是将图像设置为image-background文本容器的 CSS 属性。

<td style="background-image: url('path_to_image');">

一个不太好的技术是将文本放在浮动的容器上，具有绝对位置（这需要 JS）和大于图像元素的 z-index。

于 2013-07-04T11:19:48.703 回答
1

按照@Edorka 的建议试试这个

td.backgroundImage="url('Images/car.jpeg')";

不要创建 img 元素。

于 2013-07-04T11:22:09.497 回答