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

創(chuàng)新互聯(lián)建站專(zhuān)注于義馬網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供義馬營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，義馬網(wǎng)站制作、義馬網(wǎng)頁(yè)設(shè)計(jì)、義馬網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造義馬網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供義馬網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

前言：

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

解決方案：

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

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

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

2、利用base64格式的圖片

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

在這里我推薦一個(gè)在線(xiàn)轉(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：

   //本地圖片
  

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í)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！