Heim  >  Artikel  >  WeChat-Applet  >  So legen Sie das Hintergrundbild des Miniprogramms fest

So legen Sie das Hintergrundbild des Miniprogramms fest

王林
王林nach vorne
2021-03-02 09:45:334954Durchsuche

So legen Sie das Hintergrundbild des Miniprogramms fest

Vorwort:

Zuerst hatte ich vor, in der WXSS-Datei „background-image:url()“ zu verwenden, um das Hintergrundbild festzulegen, aber es ist ein Fehler aufgetreten, der Folgendes anzeigt: lokales Ressourcenbild in „pages/me/me.wxss“. Es kann nicht über WXSS abgerufen werden. Sie können Netzwerkbilder oder base64 verwenden oder das -Tag-Applet verwenden. Bei der WXSS-Datei besteht das Problem, dass lokale Ressourcen nicht abgerufen werden können.

Lösung:

1. Netzwerkbilder verwenden

Wir können das erforderliche Hintergrundbild auf den Server hochladen und dann die Hintergrundbildadresse verwenden.

Wenn wir das Hintergrundbild dynamisch ändern müssen, können wir die Inline-Stilbindungsvariable festlegen, um das Hintergrundbild dynamisch zu ändern.

So legen Sie das Hintergrundbild des Miniprogramms fest

2 Bilder im Base64-Format verwenden. Wir können Base64-Bilder verwenden, um das Hintergrundbild festzulegen

Hier empfehle ich eine Adresse für die Online-Konvertierung des Base64-Bildformats http://imgbase64.duoshitong.com/

Wählen Sie das Bild aus und es wird in ein Bild im Base64-Format konvertiert

So legen Sie das Hintergrundbild des Miniprogramms festKopieren Sie den Code hinein und fügen Sie ihn ein es im Hintergrund: URL (Base64-konvertierter Code); Auf diese Weise können Sie das Hintergrundbild festlegen, ohne es auf dem Server abzulegen Stellen Sie das Hintergrundbild ein

Idee: Wir müssen nur den Z-Index in CSS verwenden, um die Ebene so zu ändern, dass sie wie ein Hintergrundbild aussieht Auf diese Weise können wir auch den Effekt eines Hintergrundbilds erzielen.

Verwandte Empfehlungen: Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonSo legen Sie das Hintergrundbild des Miniprogramms fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen