如何使用HTML / Javascript / CSS动态添加文本到图像上？ [英] How can I dynamically add text onto an image with HTML/Javascript/CSS?
问题描述
我想在图片上加入文字，使文字变成透明的黑色背景。基本上，我想实现以下链接中描述的效果：
I want to add text onto an image giving the text a transparent black background. Essentially, I want to achieve the effect described in the following link:
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
问题是，我动态生成这些图像并随机放置在屏幕上。因此，我不能绝对地定位文本（至少，不知道总的文本的高度）。是否有其他方法可以这样做？
The problem is that I am dynamically generating these images and randomly placing them on the screen. Therefore, I cannot absolutely position the text (at least, not without knowing the height of the text in total). Is there another way to do this?
谢谢！
推荐答案
你可以绝对定位文本。一旦图像加载，即使随机，jQuery的position（）方法将提供您将需要的所有信息。
you can position text absolutely. once images are loaded, even if randomly, jQuery's position() method will provide you will all the information you need.
显然，您希望将图片封装在容器中。或使用和设置图像使用div的背景图像。那么你可以自由地将任何你想要的文本/效果放在容器中。
obviously, you would like to to encapsulate images in containers e.g. or use and set image using div's background image. then you have all the freedom to put whatever text/effects you want in the container.
这篇关于如何使用HTML / Javascript / CSS动态添加文本到图像上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
