首頁  >  文章  >  微信小程式  >  開發小程式時怎麼設定背景圖片

開發小程式時怎麼設定背景圖片

王林
王林轉載
2020-12-29 09:29:533864瀏覽

開發小程式時怎麼設定背景圖片

導語:

我們知道在開發微信小程式時,是不能直接在wxss檔案裡引用本機圖片的,否則在執行時會出現如下錯誤:

(學習影片分享:程式設計影片

「本機資源圖片無法透過WXSS獲取,可以使用網路圖片,或base64,或是使用2109e86067750eadad77d246aaefc248標籤的方法。

具體步驟:

1、在wxml檔案中新增一個565b296a3970f2fc50e58c1bb915cb79標籤:



	
	
	

2、在wxss檔中新增:

page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

要說明的是z-index: -1,可以讓圖片置於最底層,不會影響其它部分。

(相關推薦:小程式開發教學

以上是開發小程式時怎麼設定背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除