文字在图片上页面缩放文字不动css

要实现在图片上的文字不随页面缩放而移动，可以使用CSS的绝对定位（position: absolute）来固定文字的位置。具体的实现步骤如下：

1. 首先，在HTML中创建一个包含图片和文字的容器元素，例如一个div元素：

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <p class="image-text">Your Text</p>
</div>

2. 接下来，在CSS中设置容器元素的定位为相对定位（position: relative），以便使文字相对于图片进行定位：

.image-container {
  position: relative;
}

3. 然后，将文字元素的定位设置为绝对定位（position: absolute），并通过top、right、bottom、left属性来控制文字的位置。例如，将文字定位在图片的左上角：

.image-text {
  position: absolute;
  top: 0;
  left: 0;
}

4. 最后，使用CSS的transform属性来固定文字的大小，使其不随页面缩放而改变。可以使用scale()函数来缩放文字的大小，如下所示：

.image-text {
  transform: scale(1);
  transform-origin: top left;
}

这样，无论页面如何缩放，文字都会保持在图片的左上角位置，并且大小不会改变。

注意：上述代码只是示例，具体的样式设置可以根据实际需求进行调整