小程序如何設(shè)置背景圖片

這篇文章給大家分享的是有關(guān)小程序如何設(shè)置背景圖片的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

前言：

一開始，打算在wxss文件中使用background-image:url()來設(shè)置背景圖，但是卻出現(xiàn)了報(bào)錯(cuò)了，提示：pages/me/me.wxss 中的本地資源圖片無法通過 WXSS 獲取，可以使用網(wǎng)絡(luò)圖片，或者 base64，或者使用<image/>標(biāo)簽小程序中設(shè)置區(qū)域背景圖。對(duì)于在wxss文件中，存在本地資源無法獲取的問題。

解決方案：

1、使用網(wǎng)絡(luò)圖片

我們可以把需要的背景圖片上傳到服務(wù)器上，然后使用背景圖片地址。

如果我們需要?jiǎng)討B(tài)改變背景圖片，我們可以設(shè)置行內(nèi)樣式style綁定變量從而做到動(dòng)態(tài)改變背景圖片；

2、利用base64格式的圖片

我們可以用base64的圖片做到設(shè)置背景圖片

在這里我推薦一個(gè)在線轉(zhuǎn)換的base64圖片格式的地址http://imgbase64.duoshitong.com/

選擇圖片會(huì)轉(zhuǎn)換成base64格式的圖片

復(fù)制里面的代碼放到background: url(base64轉(zhuǎn)換的代碼);這樣既可做到設(shè)置背景圖片也不用放到服務(wù)器上

（學(xué)習(xí)視頻分享：php視頻教程）

3、利用image標(biāo)簽做到設(shè)置背景圖片

思路：我們只要利用css中的z-index改變層級(jí)既可做到變成背景圖的樣子

看代碼

wxml：

<view class = "login-box" >
   //本地圖片
  <image src='../../../static/images/login_bg.png'></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;
}

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

感謝各位的閱讀！關(guān)于“小程序如何設(shè)置背景圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！