微信小程序，图片上的文字，随着屏幕分辨率变化，图片大小变化，但是文字在图片上的位置不变

实现这种效果可以考虑使用CSS中的`position`属性和`top`、`bottom`、`left`、`right`属性。

首先，将图片和文字分别放在一个容器中，如下所示：

<div class="image-container">
  <img src="your-image-url" alt="Your image">
  <div class="text-container">
    <p>Your text</p>
  </div>
</div>

接下来，为文本容器设置绝对定位（position: absolute），然后使用top、bottom、left、right属性来控制文本的位置。例如，如果希望在图片的左上角显示文本，可以这样设置：

.image-container {
  position: relative;
}

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

这样，不管图片的大小如何变化，文本始终会保持在图片的左上角。

类似地，你可以使用其他值来控制文本的位置，例如`bottom: 0; right: 0;`可以让文本始终保持在图片的右下角。

相关问题

微信小程序，图片上的文字，随着屏幕分辨率变化，图片大小变化，但是文字在图片上的位置不变。用css实现

可以使用CSS中的`position`属性和`transform`属性来实现文字在图片上的位置不变。

首先，将图片和文字都放在一个父元素中，如下所示：

<div class="image-container">
  <img src="your-image" alt="your-image">
  <div class="text-overlay">Your Text</div>
</div>

然后，使用CSS设置父元素的`position`为`relative`，图片和文字的`position`为`absolute`，并使用`transform`属性来定位文字的位置，如下所示：

.image-container {
  position: relative;
}

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

这样，文字就会在图片上居中显示，并且随着图片大小的变化而自动调整位置。

微信小程序，自适应页面框架，固定页面view的绝对位置。不随着屏幕分辨率变化

对于微信小程序，可以使用 rpx 单位来实现自适应页面，rpx 是微信小程序中的相对长度单位，可以根据屏幕宽度进行自适应。同时，可以使用 position 属性来实现固定页面 view 的绝对位置。

例如，设置一个固定在页面顶部的 view，可以使用以下代码：

.fixed-view {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50rpx;
}

其中，`position: fixed` 表示固定定位，`top: 0` 表示距离页面顶部的距离为 0，`width: 100%` 表示宽度为页面宽度，`height: 50rpx` 表示高度为 50 个 rpx。这样设置后，即使屏幕分辨率变化，该 view 也会保持在页面顶部固定位置。