ホームページ > 記事 > WeChat アプレット > WeChat アプレットの背景画像が表示できない
小さなプログラムを開発する場合は、ページの背景を設定し、CSS コードを使用します。デバッグ ツールには
.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/images.jpg') no-repeat; background-size: 100% 100%; }
が表示されますが、スキャンは次の場所にアップロードされます。携帯電話でも表示できません。
これは、背景画像ではネットワーク URL または Base64 画像エンコーディングのみを使用でき、ローカル画像では画像タグの src 属性のみを使用できるためです。もちろん、イメージ タグの src 属性では、ネットワーク URL または Base64 イメージ エンコーディングを使用することもできます。
解決策:
背景画像表示を実現するために画像タグのsrc属性で以下を設定します
インターフェース構造:
<view class='set-background'> <image class='background-image' src='{{item.countryPic}}'></image> <view class='background-content'> <view class="set-background-avatar" background-size="cover"> <image class="post-specific-image" src="{{item.picture}}"></image> </view> </view> </view>
wxssスタイル:
.set-background { display: flex; flex-direction: column; align-items: center; height: 150px; } .set-background-avatar { width: 220px; height: 150px; } .background-content { position: absolute; z-index: 1; } .background-image { width: 225px; height: 150px; opacity: 0.8; } .post-specific-image { width: 215px; height: 150px; vertical-align: middle; }
推奨: 「 ミニ プログラム開発チュートリアル 」
以上がWeChat アプレットの背景画像が表示できないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。