Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > WeChat-Applet > Mini-Programmentwicklung > So verwenden Sie lokale Bilder als Hintergrund für Miniprogramme

So verwenden Sie lokale Bilder als Hintergrund für Miniprogramme

王林
Freigeben： 2021-01-22 10:32:09
nach vorne
2715 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
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!

Verwandte Etiketten：
图片 小程序 背景
Quelle：csdn.net
Vorheriger Artikel：Einführung in den Prozess der Registrierung eines Miniprogrammkontos Nächster Artikel：So teilen Sie ein Miniprogramm mit Moments
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1335
Regulärer Ausdruck zum Abgleichen von Wörtern Ich habe ein Skript, in dem ich versuche, neue Jobnamen mit vorhandenen Jobnamen in einer ...
Aus 2024-04-06 21:24:04
0
1
606
Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
Aus 2024-04-06 20:57:16
0
1
487
Erstellen dieses speziellen Designs mithilfe eines Rasters: eine Schritt-für-Schritt-Anleitung Ich versuche, ein Layout zu erstellen, das diesem Bild ähnelt. Ich habe versucht, dieses R...
Aus 2024-04-06 20:29:08
0
2
492
Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...
Aus 2024-04-06 19:23:03
0
1
411
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage