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

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

2 个答案: