怎麼把本地圖片當成小程式背景

我們知道在微信小程式中是無法直接為view設定本機圖片的。那我們要怎麼解決這個問題呢？

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

解決方法如下：

1、使用網路圖片

2、使用base64格式

3、使用image來裝載本地的圖片，然後作為介面背景

前面兩種都很簡單，下面我們重點來講講第三種。一般大家的苦惱都是這麼把imageview放到介面的最下面。那麼下面就直接上程式碼。
wxml

<view class="root">
  <image class=&#39;background-image&#39; src=&#39;../res/login_bg.png&#39; mode="aspectFill"></image>
  <view class="content">
  </view>
</view>

wxss

.root {
   width: 100%;
    height: 100%;
    background-color: #70c7da;
    position: relative;
}

.background-image{
   height : 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}
.content{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

好了，搞定。只要用相對佈局，就可以實現了。類似android的相對佈局。現在只要把內容全部寫道content中就行了

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

#

以上是怎麼把本地圖片當成小程式背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！