首頁  >  文章  >  微信小程式  >  怎麼把本地圖片當成小程式背景

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

王林
王林轉載
2021-01-22 10:32:092675瀏覽

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

我們知道在微信小程式中是無法直接為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中文網其他相關文章!

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