ミニプログラムの背景画像の設定方法

前書き:

最初は、wxss ファイルのbackground-image:url()を使用して背景画像を設定する予定でしたが、エラーが発生し、プロンプトが表示されました。 : Pages/me/me.wxss のローカル リソース イメージは、WXSS 経由では取得できません。ネットワーク イメージまたは Base64 を使用するか、 タグ アプレットを使用して、地域の背景イメージを設定できます。 wxss ファイルの場合、ローカルリソースが取得できないという問題があります。

解決策:

1. ネットワーク画像を使用する

必要な背景画像をサーバーにアップロードし、背景画像のアドレスを使用します。

背景画像を動的に変更する必要がある場合は、背景画像を動的に変更するようにインライン スタイル スタイル バインディング変数を設定できます;

2。 Base64 形式の画像

Base64 画像を使用して背景画像を設定できます

ここでは、オンラインで変換された Base64 画像形式のアドレス http://imgbase64.duoshitong.com/

をお勧めします。選択した画像は、base64 形式の画像に変換されます

#内部のコードをコピーして背景に配置します: URL (base64 変換コード); これは実行できます。背景画像をサーバーに置く必要があります

(学習ビデオ共有:

php ビデオ チュートリアル)

3. 画像タグを使用して背景画像を設定します

アイデア: CSS で z-index を使用してレベルを背景画像のように変更するだけです

コードを見てください

wxml：

<view class = "login-box" >
   //本地图片
  <image src=&#39;../../../static/images/login_bg.png&#39;></image>
</view>

wxss：

page{
 height: 100%;
 width: 100%;
}
.login-box {
  height: 100%;
}
 
image {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  z-index: -999;
}

このようにして、背景画像の効果も実現できます。

関連する推奨事項:

ミニ プログラム開発チュートリアル

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