小さなプログラムを開発するときに背景画像を設定する方法

はじめに:

WeChat アプレットを開発する場合、wxss ファイル内のローカル画像を直接参照できないことはわかっています。そうしないと、実行時に次のエラーが発生します:

(学習ビデオ共有: プログラミング ビデオ)

「ローカル リソース イメージは、WXSS 経由では取得できません。ネットワーク イメージ、base64、または c32c552c658a8d692bfb38dd85ab7a43タグの使い方を紹介します。

具体的な手順:

1. wxml ファイルに 565b296a3970f2fc50e58c1bb915cb79 タグを追加します:

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class=&#39;background&#39; src="../../pics/background.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>

2. wxss ファイルに

page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

を追加します。

z-index: -1 を指定すると、他の部分に影響を与えることなく画像を一番下に配置できることに注意してください。

(関連する推奨事項: 小さなプログラム開発チュートリアル)

以上が小さなプログラムを開発するときに背景画像を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。