Comment utiliser des images locales comme arrière-plan d'un mini-programme

Nous savons que vous ne pouvez pas définir directement des images locales pour les vues dans les mini-programmes WeChat. Alors comment résoudre ce problème ?

(Partage de vidéos d'apprentissage : Introduction à la programmation)

La solution est la suivante :

1. Utiliser des images réseau

2. Utilisez le format base64

3. Utilisez image pour charger des images locales, puis utilisez-les comme arrière-plans d'interface

Les deux premiers sont très simples, concentrons-nous sur le troisième ci-dessous. Généralement, le problème de tout le monde est de mettre la vue image en bas de l'interface. Accédez ensuite directement au code ci-dessous.
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;
}

D'accord, c'est fait. Tant que vous utilisez une disposition relative, vous pouvez y parvenir. Semblable à la disposition relative Android. Maintenant, écrivez simplement tout le contenu dans le contenu

Recommandations associées : Tutoriel de développement de mini-programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!