小程式背景圖片設定方法

前言：

一開始，打算在wxss檔中使用background-image:url()來設定背景圖，但是卻出現了報錯了，提示： pages/me/me.wxss 中的本機資源圖片無法透過WXSS 獲取，可以使用網路圖片，或base64，或使用標籤小程式中設定區域背景圖。對於在wxss檔案中，存在著本地資源無法取得的問題。

解決方案：

1、使用網頁圖片

我們可以把需要的背景圖片上傳到伺服器上，然後使用背景圖片位址。

如果我們需要動態改變背景圖片，我們可以設定行內樣式style綁定變數從而做到動態改變背景圖片；

2、利用base64格式的圖片

我們可以用base64的圖片做到設定背景圖片

在這裡我推薦一個線上轉換的base64圖片格式的地址http://imgbase64.duoshitong.com/

選擇圖片會轉換成base64格式的圖片

複製裡面的程式碼放到background: url(base64轉換的程式碼);這樣既可做到設定背景圖片也不用放到伺服器上

（學習影片分享：php影片教學）

3、利用image標籤做到設定背景圖片

想法：我們只要利用css中的z-index改變層級既可做到變成背景圖的樣子

看程式碼

wxml：

<view class = "login-box" >
   //本地图片
  <image src=&#39;../../../static/images/login_bg.png&#39;></image>
</view>

wxss：

page{
 height: 100%;
 width: 100%;
}
.login-box {
  height: 100%;
}
 
image {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  z-index: -999;
}

這樣我們也可以做到背景圖的效果。

相關推薦：小程式開發教學

以上是小程式背景圖片設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！