uni-app 中使用背景图片
一 : H5 上使用(但是在微信小程序中报错)
background-image: url(../../static/images/bg.png);
background-size: 100% 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
二 : 微信小程序中可以
1,使用网络图片(对不同环境需要不同配置),
2,或者 base64(需要本地转换),
3,或者使用标签(推荐使用)
<view class="out">
<image class="image-bg" src="/static/images/bg.png"/>
// ...
</view>
</view>
.out {
position: relative;
z-index: 0; // 支付宝小程序下背景不生效时,可以加上这个
}
.image-bg {
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}