微信小程序設(shè)置背景圖的幾種方式
原本在html中可以通過(guò)background-image來(lái)設(shè)置背景圖片
.page {
width: 100%;
height: 100%;
background-size: 100% 100%;
position: relative;
color: #fff;
background-image: url(’../../../assets//icon-home.png);
}
但是在wxss中出現(xiàn)
解決方法
1.使用網(wǎng)絡(luò)圖片：
<view class="page" style=" background-image: url('{{ossHost}}nmxy/assets/home/bg.png');"></view>
2.base64格式的圖片,訪問(wèn)圖片轉(zhuǎn) BASE64 編碼 | 菜鳥(niǎo)工具上傳圖片生成base64文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-509700.html
<view class="page" style=" background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RXhpZg***********************ooogD//Z');"></view>
3.使用標(biāo)簽文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-509700.html
<view class="page" >
<image src="../assets/bg.png"></image>
</view>
image {
position: absolute;//使用絕對(duì)定位
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
z-index: -999;
}
到了這里，關(guān)于微信小程序設(shè)置背景圖的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
