web-dev-qa-db-ja.com

ionic 4：イオンコンテンツの背景の変更が機能しない

私はglobal.scssで試しました

ion-content{
    background-image: url('assets/images/cover.jpg');
    -webkit-background-image: url('assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
  }

しかし、これは画像をレンダリングしません。 ./assets/images/cover.jpgのパスも試しました。

無効な画像の可能性を排除して表示されるページにimgタグと同じ画像を配置した場合。

また、homeage.scssに

.myview {
    background-image: url('../../assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}

そして、home.htmlでclass = "myview"を使用すると、運が悪い

cssangulartypescriptionic-frameworkionic4
12
Vik

CSS-Variable --backgroundを使用して、イオンコンテンツの背景を変更できます。

例：

ion-content{
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}

これをコンポーネント、ページ、またはグローバルscssに入れます。

参照用： https://beta.ionicframework.com/docs/api/content#css-custom-properties

45
Gary Großgarten

以下を実行して問題を解決しました。

ion-content {
    --background: none;
    background-image: url('/assets/imgs/page_bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

これにより、バックグラウンドが無効になり、正しいバックグラウンドが設定されます。

10
GianPierre Gálvez

同様の状況に遭遇しました。ionic background cssプロパティがあると、IOSでちらつきの問題が発生します。

ちらつきの問題が発生した場合は、次を試してください

:Host {
  ion-content {
    --background:none;
    background:url(''../../assets/images/cover.jpg');
    background-size: cover;
    background-position: center center;
  }
}

キーボードの問題（キーボードショーの背景のサイズ変更）がある場合は、キーボードプラグインをインストールします

https://ionicframework.com/docs/native/keyboard/

config.jsonに次のコードを追加します

<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />

注：これは、表示されているときにアイテムをキーボードの下に隠す場合があります（iOSでのみテスト済みです）

5
kishorekumaru

@rchauから回答を試みましたが、私の場合はうまくいきませんでした。代わりに、このコードをプロジェクトに入れて、正しいことを行いました。

ion-content{
    --background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}
0
Jaikant Chaturvedi

4-05-2019

これは私にとって実用的なソリューションです。

ion-content {
    --background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}
0
Sampath