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

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

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

? ? ? ?本地圖片轉(zhuǎn)換成base64圖片（轉(zhuǎn)換網(wǎng)址）：base64圖片在線轉(zhuǎn)換工具 - 站長(zhǎng)工具

? ? ? ? 轉(zhuǎn)換完成之后，復(fù)制base64碼，添加到.wxss中的背景圖片中，如下：

? ? ??

background-color:(網(wǎng)絡(luò)圖片地址); background-color:(base64圖片碼);

????????

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

//.wxml <view class="container"><image src='../image/2.jpg'></image><view class='text'>為我設(shè)置背景圖片</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; }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。