uni-app 中使用背景图片
一 : H5 上使用(但是在微信小程序中报错)文章来源:https://www.toymoban.com/news/detail-603706.html
background-image: url(../../static/images/bg.png);
background-size: 100% 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
二 : 微信小程序中可以
1,使用网络图片(对不同环境需要不同配置),
2,或者 base64(需要本地转换),
3,或者使用标签(推荐使用)文章来源地址https://www.toymoban.com/news/detail-603706.html
<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%;
}
到了这里,关于uni-app 中使用背景图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!