微信小程序,图片上的文字,随着屏幕分辨率变化,图片大小变化,但是文字在图片上的位置不变
时间: 2023-08-21 09:01:37 浏览: 300
实现这种效果可以考虑使用CSS中的`position`属性和`top`、`bottom`、`left`、`right`属性。
首先,将图片和文字分别放在一个容器中,如下所示:
```html
<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属性来控制文本的位置。例如,如果希望在图片的左上角显示文本,可以这样设置:
```css
.image-container {
position: relative;
}
.text-container {
position: absolute;
top: 0;
left: 0;
}
```
这样,不管图片的大小如何变化,文本始终会保持在图片的左上角。
类似地,你可以使用其他值来控制文本的位置,例如`bottom: 0; right: 0;`可以让文本始终保持在图片的右下角。
阅读全文