微信小程序设置背景图片

Question

在微信小程序是无法使用css的background-image为元素设置背景图片的。于是我就用

<image src='../../images/img.jpg'></image>
<view>用absolute定位设置背景图片</view>

然后通top,left,right,bottom将view的内容放在image的顶层，想问问这样的方法会不会出问题，按目前我的真机（只有6s）测试是没问题的。

Answer 1

这种方式测试真机是没有问题的，但是从写代码的角度，如果是背景图片用background-image设置更适合些

background-image 使用的时候需要注意它只能用网络url或者base64 ，本地图片用image标签

设置背景图片（手机和微信开发者工具上面预览都可以显示出来）

<view style="background-image: url('https://segmentfault.com/img/bVbbZxX?w=1080&h=517')">用absolute定位设置背景图片</view>

Answer 2

用定位要注意定位父级

<view class='imgbox'>
  <image class='ico' mode='scaleToFill' src='{{ico}}></image>
    <text class="txt">{{text}}</text>
</view>

.imgbox{
  position: relative;
  width: 600rpx;
  height: 400rpx;
}
.ico{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.txt{
   position: relative;
}