Methode zur absoluten Positionierung von Bildern (Hintergrundbildern) in WeChat-Miniprogrammen

In diesem Artikel werden hauptsächlich relevante Informationen zur absoluten Positionierung von WeChat-Miniprogrammbildern vorgestellt (Freunde in Not können sich darauf beziehen)

Die absolute Positionierung von WeChat-Miniprogrammbildern

Vorwort:

In kleinen Programmen müssen Sie manchmal Hintergrundbilder verwenden, aber wenn Sie Hintergrundbilder verwenden, können Sie die Größe des Bildes nicht steuern. Im Allgemeinen wird ein Hintergrundbild verwendet. Komprimieren Sie das Bild in ein 1-Pixel-Hintergrundbild und füllen Sie es dann automatisch aus. Wenn Sie Hintergrundbilder verwenden, verwenden Sie im Allgemeinen einige neue Ansichtsebenen, z. B. usw ., aber sie sind klein. Das Programm ähnelt HTML, und dann wird das nächste CSS oder WXSS automatisch nach unten gesetzt. Dies ist jedoch oft nicht das, was wir wollen, daher ist eine absolute Positionierung erforderlich verwendet werden.

Verwenden Sie die absolute Positionierung, um alle untergeordneten Steuerelemente einzuschließen, und definieren Sie dann in diesem Wxss, das alle untergeordneten Steuerelemente enthält, ein Attribut position: relative in jedem untergeordneten Steuerelement. Position definieren: absolut, jetzt können Sie die Position durch absolute Positionierung ändern, z. B. oben usw. Unten ist ein Teil des WXSS-Codes angehängt:

.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;
}

und dann wxml anhängen Code:

<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>

Der Inhalt ist ungefähr so: Er definiert hauptsächlich den Positionierungstyp durch Position und verwendet dann top, um die Position zu finden Bilden und definieren Sie es.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse des WeChat Mini-Programms Amap SDK

So erhalten Sie die Funktion über das WeChat Mini-Programm der Längen- und Breitengradkoordinaten des Standorts

Die Implementierung der Funktion zum Hochladen mehrerer Bilder des WeChat-Applets

Das obige ist der detaillierte Inhalt vonMethode zur absoluten Positionierung von Bildern (Hintergrundbildern) in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!