用css和HTML怎么把一段文字固定在一张图片上

可以使用CSS的position属性来实现将文字固定在图片上。

HTML代码：

<div class="container">
  <img src="image.jpg" alt="Image">
  <div class="text">
    <h2>Title</h2>
    <p>Some text here</p>
  </div>
</div>

CSS代码：

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px #000;
}

解释：

- 将图片和文字都放在一个容器（div）中，容器的position属性设置为relative，为了让后面的绝对定位元素相对于该容器进行定位。
- 将文字所在的div的position属性设置为absolute，这样它就可以脱离文档流并且相对于父容器进行定位。
- 使用top和left属性将文字的位置设置在父容器的中心，使用transform: translate(-50%, -50%)属性将文字向上和向左移动50%，以确保文字竖直和水平居中。
- 使用text-align属性将文字水平居中，使用color属性设置文字颜色，使用font-size和font-weight属性设置文字大小和粗细程度，使用text-shadow属性设置文字阴影。

最终效果是文字固定在图片上，并且居中显示。