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

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

前言：

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

解決方案：

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

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

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

2、利用base64格式的圖片

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

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

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

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

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

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

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

看代碼

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)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：小程序如何設(shè)置背景圖片
文章源于：http://chinadenli.net/article0/jieioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、搜索引擎優(yōu)化、網(wǎng)站策劃、云服務(wù)器、標(biāo)簽優(yōu)化、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)