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

導語：

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

（學習影片分享：程式設計影片）

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

具體步驟：

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

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class=&#39;background&#39; src="../../pics/background.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>

2、在wxss檔中新增：

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

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

（相關推薦：小程式開發教學）

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