溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關小程序如何設置背景圖片的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
前言：
一開始，打算在wxss文件中使用background-image:url()來設置背景圖，但是卻出現了報錯了，提示：pages/me/me.wxss 中的本地資源圖片無法通過 WXSS 獲取，可以使用網絡圖片，或者 base64，或者使用<image/>標簽小程序中設置區域背景圖。對于在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='../../../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;
}這樣我們也可以做到背景圖的效果。
感謝各位的閱讀！關于“小程序如何設置背景圖片”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
