有什么方法可以在不使用“位置：绝对”的情况下在图像上获取文本？

【问题标题】：what are the ways to get texts on image without using "position:absolute"?有什么方法可以在不使用“位置：绝对”的情况下在图像上获取文本？
【发布时间】：2018-05-19 21:54:58
【问题描述】：

这是在图像上获取文本的唯一方法吗？位置：绝对；顶部：0；（在 0 或图像所在的任何位置..）

有没有其他方法可以做到这一点？

【问题讨论】：

位置与显示文本无关
您应该发布您尝试过的代码。为此使用绝对位置有什么问题？另一种方法是在包含文本的元素上添加背景图像。

标签： css image text position

【解决方案1】：

根据 html 布局，还有其他选项。使用背景图片作为评论中所说的吐司。也可以使用负边距。像这个例子：

.myimage{
  background:red;
  display:block;
  margin-bottom: -50px;
}
    
.mytext{
  color:white;
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red block" width="100" height="100" class="myimage" />
<div class="mytext">
[SOME TEXT]
</div>

【讨论】：