не может динамически добавлять текст поверх изображения

Я разрабатываю мобильную веб-страницу, используя 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>

Я попытался, добавив компонент Див & затем добавить текст + фоновое изображение к нему. Он также не работает.

источник

2013-07-04 jmj

Лучший выбор: установить изображение как CSS image-background свойство текстового контейнера.

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

не столь хорошая техника будет размещать текст на контейнер с плавающим, с абсолютным положением (это whould требует JS) и Z-индекса больше, чем элемент изображения.

источник

2013-07-04 11:19:48 Edorka

Я пробовал с z-индексом, и он отлично работал. Спасибо Edorka – jmj

Отлично, рад помочь :) – Edorka

Попробуйте это как @Edorka предлагает

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

не создавать элемент img.

источник

2013-07-04 11:22:09 Piyuesh

используйте символы '', чтобы вы могли обернуть свой код как таковой. – Edorka

спасибо за помощь – jmj

не может динамически добавлять текст поверх изображения

ответ

Смежные вопросы