vue 在图片中间加文字

可以使用CSS的position属性和z-index属性来实现在图片中间加文字。首先将图片和文字包裹在同一个div中，将div的position属性设置为relative，然后将文字的position属性设置为absolute，利用top和left属性来调整文字的位置，最后利用z-index属性来控制文字在图片上的层级。具体代码实现可以参考以下示例：

HTML代码：

<div class="image-wrapper">
  <img src="example.jpg">
  <div class="text-overlay">
    <p>这是图片上的文字</p>
  </div>
</div>

CSS代码：

.image-wrapper {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

.text-overlay p {
  text-align: center;
}

其中，text-overlay类为文字所在的Div，通过position: absolute属性使其固定在图片上方，top, left属性使文字位于图片的中心，z-index 属性为1，并添加了适当的背景色和 padding 。最后，记得将图片和文字调整至最适合你的情况。