Html 文本和图像

有人知道如何在桌面上的图像上显示文本，在手机上的图像上显示文本div吗

此代码以小分辨率显示图像下的文本div

.image容器{
位置：相对位置；
宽度：100%；
身高：100%；
}
.图像容器img{
宽度：100%；
垂直对齐：顶部；
}
.图像容器：之后{
内容：'\A'；
位置：绝对位置；
宽度：100%；高度：100%；
顶部：0；左侧：0；
背景：rgba（0,0,0,0.3）；
不透明度：1；
过渡：所有1；
-webkit转换：所有1；
}
.后文{
宽度：100%；
高度：自动；
颜色：#000；
位置：绝对位置；
最高：50%；
左：30%；
}
@媒体屏幕和屏幕（最大宽度：980px）{
.后文{
位置：相对位置；
宽度：100%；
高度：自动；
颜色：#000；
}

Lorem ipsum dolor sit ametin orci risus est
Lorem ipsum dolor sit amet，位于orci risus东部
Lorem ipsum dolor sit amet，美国

我想你是在问如何在图像上显示文本
将图像作为包装div的背景图像放置会更容易，但是在这个场景中，我将图像视为内容，因此属于HTML。我们将使用包装div作为绝对定位的容器

要添加的CSS

.image{
位置：相对位置；
宽度：100%；
/*对于IE 6*/
}
氢{
位置：绝对位置；
顶部：200px；
左：0；
宽度：100%；
}
氢跨度{
颜色：白色；
字体：粗体24px/45px Helvetica，无衬线；
字母间距：-1px；
背景：rgb（0,0,0）；
/*退色*/
背景：rgba（0,0,0,0.7）；
填充：10px；
}

这只是一条测试消息