добавить текст на изображение, используя позицию

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);
});

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

Спасибо

Answer 1

С http://api.jquery.com/position/

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

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

Answer 2

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

демо

Answer 3

Текст не появляется или просто неуместен?

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

Для добавления атрибута в javascript вы можете прочитать: Как добавить / обновить атрибут для элемента HTML с помощью JavaScript?

Answer 4

Вам следует посетить этот сайт:

• http://css -tricks.com / текстовые блоки поверх изображения /

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