css - 在图像上书写

Question

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

如何添加句子？

提前谢谢。

这是图像，左下角的文字表示“打印图像”。

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