Добавить текст на картинке с помощью позиции

Question

Я хочу добавить текст динамически на изображение. Я попытался использовать javascript/jQuery для этого. Вот код:

$(document).ready(function() 
{ 
    var img = $("img#back1"); 
    var leftpos = img.position().left; 
    var toppos = img.position().top; 
    var div = document.createElement('div'); 
    div.style.position = 'absolute'; 
    div.style.top = toppos+"px"; 
    div.style.left = leftpos+"px"; 
    div.innerHTML = '<font> back </font>'; 
    div.style.background = '#CC0000'; 
    document.body.appendChild(div); 
}); 

После этого, я не получаю текст «назад» над изображением. Здесь правильное положение не может быть доставлено для передачи сверху и осталось тега div, чтобы указать текст над ним. Пожалуйста, предложите/исправьте меня, если я где-то ошибся.

Благодаря

Answer 1

Лучший подход для добавления текста на изображение, чтобы поместить изображение на фоне с использованием css.It имеет много преимуществ. Вы можете проверить демо здесь

demo

Answer 2

Вы должны посетить этот сайт:

• http://css-tricks.com/text-blocks-over-image/

Это хороший учебник для porpuse. И я бы посоветовал вам узнать немного больше о jQuery, потому что весь ваш javascript-код не использует функцию jquery jsquery. .ready()

Answer 3

Текст не отображается или просто неуместен?

Если вы не видите текст, возможно, вам нужно указать свойство «z-index» в элементе DIV.

Для добавления атрибута в JavaScript вы можете прочитать: How to add/update an attribute to an HTML element using JavaScript?

Answer 4

http://api.jquery.com/position/ От

В .position() метод позволяет получить текущую позицию элемента относительно родительского смещения. Сравните это с .offset(), который извлекает текущую позицию относительно документа.

Как динамически создается div прикрепляется к body, используя offset() вместо position может помочь.