0

HTML5+Javascript を使用してモバイル Web ページを設計しています。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

画像をテキスト コンテナーの CSSimage-backgroundプロパティとして設定することをお勧めします。

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

あまり良くない手法は、絶対位置 (これには JS が必要です) と画像要素よりも大きい z-index を使用して、コンテナーにテキストをフローティングして配置することです。

于 2013-07-04T11:19:48.703 に答える
1

@Edorkaが示唆するようにこれを試してください

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

img 要素を作成しないでください。

于 2013-07-04T11:22:09.497 に答える