使用位置在图像上添加文本

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 标签的 top 和 left 以在其上指定文本。 如果我在某个地方出错了，请建议/纠正我。

谢谢

Answer 1

在图像上添加文本的更好方法是使用 css 将图像放在背景上。它有很多好处。你可以在这里查看演示

demo

Answer 2

来自http://api.jquery.com/position/

.position() 方法允许我们检索元素相对于偏移父元素的当前位置。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。

由于动态创建的div 附加到body，使用offset() 而不是position 可能会有所帮助。

Answer 3

您应该访问这个网站：

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

这是一个很好的关于你的 porpuse 的教程。我建议你多学习一点 jQuery，因为你所有的 javascript 代码都没有使用 ans jquery 功能，除了 .ready()

Answer 4

文字没有出现或根本不合适？

如果看不到文本，可能需要在 DIV 元素中指定“z-index”属性。

要在 javascript 中添加属性，您可以阅读：How to add/update an attribute to an HTML element using JavaScript?