当我调整浏览器窗口大小时，文本在图像上不起作用

Question

我希望文字显示在图像上。当我在笔记本电脑中全屏查看时效果很好。但是当减小浏览器大小时，文本会位于图像上，但文本不会被包裹在图像本身上方。 有谁可以帮助我？

HTML：                                                             我们的所有客户都有很高的客户评价。                              的CSS：

.image {

  position: relative;
}

.text-over {
width:100%;
  z-index: 1;
   position: absolute; 
  color: white;

  font-size:100%;
 bottom:0;
  background-color:#FF0000;

}
.img-responsive{max-width :100%;}

Answer 1

您可以将图像设置为背景图像。然后你的文字将显示在图像上，例如

<style>
div{
background-image:url('pic.jpg');
background-size:cover;
height:100px;
width:100%;
</style>

<div>
<span> Text Over Image</span>
</div>