So verwenden Sie lokale Bilder als Hintergrund für Miniprogramme

Wir wissen, dass Sie lokale Bilder für Ansichten in WeChat-Miniprogrammen nicht direkt festlegen können. Wie lösen wir dieses Problem?

(Lernvideo-Sharing: Einführung in die Programmierung)

Die Lösung lautet wie folgt:

1. Verwenden Sie das Base64-Format

3 Schnittstellenhintergründe

Die ersten beiden sind sehr einfach, konzentrieren wir uns auf den dritten unten. Im Allgemeinen besteht das Problem aller darin, die Bildansicht am unteren Rand der Benutzeroberfläche zu platzieren. Dann gehen Sie direkt zum Code unten.

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;
}

Okay, fertig. Solange Sie ein relatives Layout verwenden, können Sie dies erreichen. Ähnlich dem relativen Android-Layout. Schreiben Sie jetzt einfach den gesamten Inhalt in den Inhalt

Verwandte Empfehlungen:

Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie lokale Bilder als Hintergrund für Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!