Méthode de positionnement absolu des images (images d'arrière-plan) dans les mini-programmes WeChat

Cet article présente principalement les informations pertinentes sur le positionnement absolu des images du mini programme WeChat (images d'arrière-plan). Les amis dans le besoin peuvent s'y référer

Le positionnement absolu des images du mini programme WeChat

Avant-propos :

Dans les petits programmes, vous devez parfois utiliser des images d'arrière-plan, mais si vous utilisez background-image, vous ne pouvez pas contrôler la taille de l'image. L'image d'arrière-plan est généralement utilisée. Compressez l'image en une image d'arrière-plan de 1 pixel, puis remplissez-la automatiquement. Si vous utilisez des images d'arrière-plan, vous utilisez généralement de nouveaux calques de vue, tels que 7c13d7ef66bafa0a636fe9de418b497e, etc. ., mais ils sont petits Le programme est similaire au HTML. Un css ou wxss différent occupera une position, puis le css ou wxss suivant sera automatiquement composé vers le bas. Cependant, souvent, ce n'est pas ce que nous voulons, donc un positionnement absolu est nécessaire. à utiliser.

Utilisez le positionnement absolu. Il est préférable d'utiliser un nouveau wxss pour inclure tous les contrôles enfants, puis dans ce wxss qui contient tous les contrôles enfants, définissez une position d'attribut : relative dans chaque contrôle enfant. définir la position : absolue, vous pouvez maintenant modifier la position via un positionnement absolu, tel que haut, etc. Vous trouverez ci-dessous une partie du code wxss :

.jx_card{
  width: 100%;
  height: 295rpx;
  background-color:#e6e6e6;
  position: relative
}
 .jxlogo{
  top: 47.5rpx;
  margin-left: 50rpx;
  width: 200rpx;
  height: 200rpx;
  float: left;
  position: absolute;
}

puis attachez le code wxml ci-dessus :

<view class="jx_card">
  <image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png">
      <image class="jxlogo" src="../../image/jx.png"/>
  </image>
 </view>

Le contenu est à peu près comme ceci. Il définit principalement le type de positionnement via la position, puis utilise top. pour trouver la position sur l'image et la définir.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse du SDK Amap du programme WeChat Mini

Comment vous obtenir via le programme WeChat Mini La fonction des coordonnées de longitude et de latitude de l'emplacement

La mise en œuvre de la fonction de téléchargement d'images multiples de l'applet WeChat

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!