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

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

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

この記事は主に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ミニプログラムAmap SDKの分析

WeChatミニプログラムを通じて現在地の経度と緯度の座標を取得する機能を実現する方法

WeChatミニプログラムは複数の写真をアップロードします関数の実装

以上がWeChatミニプログラムにおける画像(背景画像)の絶対位置決め方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。