如何使用HTML / Javascript / CSS将文本动态添加到图像上？

Question

我想在图像上添加文本，使文本具有透明的黑色背景。 本质上，我想实现以下链接中描述的效果：

http://www.google.com/url?sa=t&source=web&cd=4&ved=0CD8QFjAD&url=http%3A%2F%2Fcss-tricks.com%2F3118-text-blocks-over-image%2F&rct=j&q=text% 20on％20image＆ei = IsmITsK4DYWc0AWj-4H9Dw＆usg = AFQjCNHD2pL0MiEQObwT53pWzFq2gJoH6g＆cad = rja

问题是我正在动态生成这些图像并将它们随机放置在屏幕上。 因此，我不能绝对定位文本（至少在不完全知道文本高度的情况下）。 还有另一种方法吗？

谢谢！

Answer 1

您可以绝对定位文本。 加载图像后，即使是随机加载的图像，jQuery的position（）方法也将为您提供所需的所有信息。

显然，您希望将图像封装在例如容器中，或者使用div的背景图像来设置图像。 那么您就可以自由地将所需的任何文本/效果放入容器中。

Answer 2

我正在动态生成这些图像并将它们随机放置在屏幕上。

到目前为止，如果没有看到一些代码，很难提供帮助。 如果要动态生成图像，那么是否还可以同时动态生成文本呢？

即而不是生成：

<img style="position: absolute; top: RANDOMVALUE; left: RANDOMVALUE;">

您能否生成：

<div class="image-with-text-over-it" style="position: absolute; top: RANDOMVALUE; left: RANDOMVALUE;">
    <img>
    <p>Text to be overlaid on image</p>
</div>

然后在样式表中，编写一些CSS，将每个实例中的文本放置在该实例中的图像上：

.image-with-text-over-it p {
    position: absolute;
    bottom: 2em;
    left: 0;
    color: #fff;
    background: rba(0, 0, 0, 0.8);
}