css中文字覆盖图片上面

在网页设计中，我们常常会遇到需要在图片上覆盖文字的情况。这个时候，就可以用到CSS的文本覆盖功能。

CSS中的文本覆盖功能主要是通过绝对定位来实现。首先，我们需要将图片以及文字都放置在同一个父元素中，并给父元素设置position: relative; 这样，父元素成为了定位参照点。

.parent{
  position: relative;
}

.parent img{
  width: 100%;
  height: auto;
}

.parent p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
} 

接着，我们需要给文本设置绝对定位，指定其位置。例如，我们可以让文本在父元素的中心位置上覆盖图片，可以设置top: 50%; left: 50% 然后，使用transform: translate(-50%,-50%) 来将其整体向左上方移动自身宽度和高度的一半。这样，就可以让文本出现在图片正中间的位置。

当然，我们还可以使用z-index属性来指定文本的显示级别，并让其覆盖在图片之上。

.parent p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.parent img{
  position: relative;
  z-index: 0;
} 

上述代码中，我们将文本的z-index设置为1，让其显示在图片之上。而图片的z-index设置为0，则表示其在z轴上的大小为0，即在文本之下。

总之，在实现文本覆盖图片的效果时，我们需要考虑元素的定位关系和显示级别，这样才能得到最佳的覆盖效果。