不能在圖片上動態添加文字

我正在使用HTML5 + 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組件&然後添加文本+背景圖像到它試圖。這也不起作用。

來源

2013-07-04 jmj

更好的選擇是將圖像設置爲CSS image-background文本容器的屬性。

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

甲不太好技術將被把一個容器浮於文本，以絕對位置（這需要對子級JS）和z軸折射率比圖像元素更大。

來源

2013-07-04 11:19:48 Edorka

我試着用z-index，它工作得很好。謝謝Edorka – jmj

太棒了，很高興幫助:) – Edorka

嘗試此作爲@Edorka表明

td.backgroundImage = 「URL（ '圖像/ car.jpeg'）」;

不要創建img元素。

來源

2013-07-04 11:22:09 Piyuesh

使用''符號，所以你可以包裝你的代碼。 – Edorka

感謝您的幫助 – jmj

不能在圖片上動態添加文字

回答

相關問題