ホームページ >WeChat アプレット >ミニプログラム開発 >WeChatミニプログラムにおける画像（背景画像）の絶対位置決め方法

WeChatミニプログラムにおける画像（背景画像）の絶対位置決め方法

不言オリジナル: 2018-06-26 16:20:199063ブラウズ

この記事は主にWeChatミニプログラム画像の絶対位置(背景画像)に関する関連情報を紹介しますので、必要な友達は参考にしてください

WeChatミニプログラム画像の絶対位置

前書き:

で。ミニプログラムでは、背景画像を使用する必要がある場合がありますが、背景画像を使用する場合、画像のサイズを制御することはできません。通常、背景画像は画像を 1 ピクセルの背景画像に圧縮するために使用されます。自動的に埋められます。背景画像を使用する場合は、通常、7c13d7ef66bafa0a636fe9de418b497e などのいくつかの新しいビューレイヤーを使用しますが、アプレットは html に似ており、別の css または wxss が位置を占め、次の css または wxss が自動的に下向きにタイプセットされますが、多くの場合、これは希望どおりではないため、絶対位置指定を使用する必要があります。

絶対配置を使用するには、新しい wxss を使用してすべての子コントロールを含めるのが最善です。その後、すべての子コントロールを含むこの wxss でプロパティ「position:相対」を定義し、各子コントロールで「position:absolute」を定義します。 , これで、top などの絶対位置によって位置を変更できるようになります。添付されているのは 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;
}

次に、wxml コードを添付します:

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

内容はおおよそこんな感じですこれは、主に位置によって行われます。まず位置決めタイプを定義し、次に、top を使用して画像上の位置を見つけて定義します。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

WeChatミニプログラムにおける画像（背景画像）の絶対位置決め方法

関連記事