写在图像上

Question

我的网站上有一张图片，我想添加一个打印选项。所以我找到了一种方法，但是我希望“打印图像”这个词位于图像的顶部，在它的左下角。

如何添加句子？

非常感谢。

This is the image，左下角的文字表示“打印图像”。

Answer 1

<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>

Answer 2

我认为你想要创建一个位于图像左下角的文本叠加层。要实现此目标，您可以将文本包装在span内联元素中，该元素包含在div中，其位置设置为absolute。设置顶部和左侧属性以满足您的偏好。 示例代码如下所示：

<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文件中实现样式。 希望这很有用。