在图像上书写[关闭]答案

【问题标题】：Writing on top of an image [closed]在图像上书写[关闭]
【发布时间】：2013-08-06 20:36:43
【问题描述】：

我的网站上有一张图片，我想添加一个选项来打印它。所以我找到了一种方法，但我希望“打印图像”字样出现在图像的顶部，在它的左下边缘。

如何添加句子？

先谢谢了。

This is the image，左下角的文字意思是“打印图片”。

【问题讨论】：

你有没有试过自己研究这个？你试过什么？你遇到了什么问题？
我已经尝试重新研究了大约一个小时。起初对我来说似乎很容易。我知道这似乎是一个愚蠢的问题，但我很努力但仍然无法做到，而且我是这方面的初学者，所以请帮助我......
那么您的研究将您带向何方？你试过什么吗？
阅读绝对/相对定位。
我可以在图像顶部书写，但无法将文本移至底部，只能移至左侧。因此，在尝试了许多不起作用的东西之后，我决定在 photoshop 中的图像上书写并将其剪切为 2 个部分，将它们作为 div 单独添加到我的 html 中，并在带有文本的部分上放置一个链接。在玩了很多之后，它看起来很好（虽然代码真的很长而且不美观）但是底部仍然有一个填充，如果我删除它，图像就会到达看不到的地方。跨度>

标签： css image text

【解决方案1】：

我了解到您想创建一个位于图像左下角的文本叠加层。为了实现这个目标，您可以将文本包装在一个 span 内联元素中，该元素被包装在一个位置设置为绝对值的 div 中。设置 top 和 left 属性以满足您的偏好。示例代码如下所示：

<div id="content">
<div><img src="image.jpg" /></div>
<div style="position: absolute; left: 10px; top: 100px;"> <!-- Change these parameters to reflect proper placement depending on the size of your image -->
<span>Print Image</span>
</div>
</div>

当然，您可以在 css 文件中实现样式。希望这是有用的。

【讨论】：

【解决方案2】：

<div style="position:relative">
<img src="image.gif" alt="preview" />
<div style="position:absolute; left:0px; bottom:0px; cursor:pointer" onclick="...">Print Image</div>
</div>

【讨论】：