Maison  >  Article  >  Applet WeChat  >  Comment ajouter une image d'arrière-plan à l'applet WeChat

Comment ajouter une image d'arrière-plan à l'applet WeChat

angryTom
angryTomoriginal
2020-03-23 11:29:2124940parcourir

Je définis souvent un arrière-plan de couleur pour les mini-programmes WeChat, mais je trouve soudain une belle image, comment la définir comme arrière-plan ?

Comment ajouter une image d'arrière-plan à l'applet WeChat

Comment ajouter une image d'arrière-plan du mini-programme WeChat

Ce qui suit résume les trois méthodes :

1. Ajoutez une image d'arrière-plan en définissant une image réseau via l'arrière-plan. image dans wxss;

Les images locales ne peuvent pas être utilisées comme image d'arrière-plan dans les mini-programmes WeChat

Apprentissage recommandé : Développement d'un mini programme

background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)

2. Convertissez l'image au format d'encodage Base64, puis utilisez background-image pour ajouter l'image d'arrière-plan

background-image:url(转换之后的base64字符串)

3. Utilisez la disposition du flux pour définir le niveau de l'index z et la balise d'image est placée en bas pour ajouter une image d'arrière-plan.

//html
<view class="container">
  <image src=&#39;../image/1.jpg&#39;></image>
  <view class=&#39;up&#39;>
    我是一串字符串
  </view>
</view>
//css
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.up{
  position: absolute;
  z-index: 1;
}

Site Web PHP chinois, un grand nombre de tutoriels de construction de sites Web, bienvenue pour apprendre !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn