ホームページ > WeChat アプレット > ミニプログラム開発 > ローカルの写真をミニプログラムの背景として使用する方法

ローカルの写真をミニプログラムの背景として使用する方法

王林
リリース: 2021-01-22 10:32:09
転載
2714 人が閲覧しました

ローカルの写真をミニプログラムの背景として使用する方法

WeChat ミニ プログラムのビューにローカル画像を直接設定できないことは承知しています。では、この問題をどうやって解決すればよいでしょうか?

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

解決策は次のとおりです:

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

2. Base64 形式を使用します

3. 画像を使用してローカルの画像をロードし、インターフェイスの背景として使用します

最初の 2 つは非常に単純ですが、以下の 3 番目に焦点を当てましょう。一般に、誰もが悩むのは、インターフェイスの下部にイメージビューを配置することです。次に、以下のコードに直接移動します。
wxml

<view class="root">
  <image class=&#39;background-image&#39; src=&#39;../res/login_bg.png&#39; mode="aspectFill"></image>
  <view class="content">
  </view>
</view>
ログイン後にコピー

wxss

.root {
   width: 100%;
    height: 100%;
    background-color: #70c7da;
    position: relative;
}

.background-image{
   height : 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}
.content{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}
ログイン後にコピー

わかりました。相対レイアウトを使用している限り、それを実現できます。 Androidの相対レイアウトに似ています。あとは、すべてのコンテンツを content に書き込むだけです。

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

以上がローカルの写真をミニプログラムの背景として使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート