CSS Help：文本定位在图像上

Question

假设我的图像是1000x1000。在图像的顶部，我想放置字母“A”。以下是详细信息：

• 底值为160（意思是，“A”的最底部位于距离图像顶部160px处）
• 左值也是160（意思是“A”的最左边部分距图像左边160px）

我需要这个定位是相对的。假设图像缩小到原始大小的50％，那么底部和左侧的值应该变为80和80.（顺便说一下，我选择160px作为示例，因此转换为em会很容易。）

图像可能需要位于自己的容器中，因为它需要定位在页面上。但是现在，我只需要帮助在图像上定位字母。您可以提供任何指导。

Answer 1

根据我的评论，只需使用背景图片和一些填充：

http://jsfiddle.net/Xzbcy/

尝试我和Seb的共同努力：

http://jsfiddle.net/Gg29e/4/

Answer 2

使用带有背景图片和文本的div。定位文本。

即

<div id="imageHolder"><span class="imageText"> some text</span> </div>

#imageholder {
width: 1000px;
height: 1000px;
background: transparent url(path/to/your.img) 0 0 no-repeat;
position: relative;
}
.imageText {
position: absolute;
top: 160px;
left: 160px;
 } 

缩放时，您可以使用百分比作为顶部和左侧值。或者在这里摆弄它：http://jsfiddle.net/SebastianPataneMasuelli/Gg29e/1/

Answer 3

如果图片不是bg img，你可以试试这样的东西（虽然我没有测试过）

• 将图像包含在div中
• 使div自动调整高度和宽度，使其获得图像的高度和宽度
• 将文字放在一个范围内，并给它一个比图像更高的z-index（比如z-index 2表示跨度，1表示图像）
• 然后，您可以相对于div放置跨度，它应显示在图像的顶部。