web-dev-qa-db-ja.com

Ionic全画面背景画像

Ionicフレームワークは初めてで、このようなフルスクリーンの背景画像でアプリを起動しようとしています： enter image description here

チュートリアルで表示されたステータスバーを削除しました。しかし、フルスクリーン画像を追加するにはどうすればよいですか？これをstyle.cssに追加しても反応しませんでした：

html, body{
  background-image: black;
}
cssionic-frameworkion
19
Sinan Samet

あなたのCSSで、試してみてください：

  .scroll-content {
    background: url(image) [add image position info here];

    [add any more properties here]

  }

これにより、コンテンツ領域全体の背景が設定されます。

30
Mr MT

に

ion-view class = "pane"

すべてのものがレンダリングされます...私はそれを試していないが、私はあなたがこれを管理できると思う

 
 .pane {
 background：url（image）no-repeat center center center; 
 -webkit-background-size：カバー; 
 -moz-background-size：カバー; 
 background-size：カバー; 
}
15
Helmut

イメージパスの先頭に「../」が含まれていることを確認します。これにより、アプリがデバイス用にビルドされた後、リソースフォルダー内の正しいイメージパスを指すようになります。ペイン方式を使用すると、問題が発生するように思えましたが、これは私のAndroidデバイスではなく、提供時に画像が表示されたときに最適なソリューションでした。

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}
9
Aidan Doherty

「イオンサーブ」を使用して動作したHelmutからの回答に非常に似ていますが、Android（私の場合はNexus 7の4.2.2）にプッシュすると、白い背景が表示されました。

背景を全画面表示にしたい場合、ペインクラスセレクターは正しいですが、Androidは、 "background"値を設定すると、背景が白になるように見えます。 "background-image"の使用物事を正しく置きます。

以下はAndroid上で動作し、Chrome（Webテスト中）で動作することがわかりました。

.pane {
    background-image: url(image); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
6
JDawgg

Ionic 2 beta ...

画像はwww/img/backgrounds/lake.pngに似たパスにある必要があり、付随するCSSは次のようになります。

.myClassName {
    background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

注：../../という2つのディレクトリにジャンプする必要があります

3
Ryan Loggerythm

Ionic 4イオンコンテンツの背景色を変更

enter image description here

ここで説明 ソースリンク

ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;  
}
2
Code Spy