????????微信小程序設置背景圖片時，有兩種方法：

????????第一：直接在.wxss中中使用 “background-image:url()” 設置背景圖片，但是這種加載背景圖片的方法存在一個問題，就是所加載的圖片只能是網絡圖片或base64圖片，是不可以加載本地圖片的。

但是使用base64圖片也存在弊端，（1） base64 編碼后比原圖要大；（2）如果把大圖片編碼到 html / css 中，會造成后者體積明顯增加，明顯影響網頁的打開速度。

? ? ? ?本地圖片轉換成base64圖片（轉換網址）：base64圖片在線轉換工具 - 站長工具

? ? ? ? 轉換完成之后，復制base64碼，添加到.wxss中的背景圖片中，如下：

? ? ??

background-color:(網絡圖片地址); background-color:(base64圖片碼);

????????

????????第二：在.wxml中用<image src = "本地圖片地址">，然后使用z-index將圖片置于底層（z-index 值小的在底層）

//.wxml <view class="container"><image src='../image/2.jpg'></image><view class='text'>為我設置背景圖片</view> </view> //.wxss .container{width: 100%;height: 600rpx;margin: 0;padding: 0;position: relative; } image{position: absolute;width: 100%;height: 600rpx; } .text{position: absolute;z-index: 1; }

總結

以上是生活随笔為你收集整理的微信小程序 背景图片设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。