web-dev-qa-db-ja.com

背景色の設定方法IONIC 4

1つのIONIC 4（--type = angular）ページで背景色を変更しようとすると問題が発生します。イオンコンテンツのクラスを追加しようとしています。私のhtmlファイルには：

<ion-content class="fondologin">
...
</ion-content>

私のサッシには以下があります：

.fondologin{
    background-color: #111D12!important;
}

背景色は変更されません。 --ion-background-color：＃111D12;を追加した場合variables.scssでは、ページごとに背景が正常に変更されますが、1ページで色を変更するのは1つだけです。どうすればこれを達成できますか？

angularionic-frameworkionic4
25
Kevin Sanchez

何らかの理由で私はこのように解決しました：

まず、テーマフォルダー内の--ion-background-color:#ffffff;ファイルにvariables.scssを追加しました。

ページscssに次のように書きました。

ion-content{

    --ion-background-color:#111D12;
}

その後、背景が正常に設定されました。

48
Kevin Sanchez

追加の説明を加えて、コメント付きの一番上の回答を再投稿します

ion-content{
    --ion-background-color:#111D12;
}

ionic 4以降、IonicコンポーネントはshadowDOMの概念を実装し、shadowDOMを実装するコンポーネントでCSSセレクターを見つける古い方法は機能しなくなりました

そのため、コンポーネントが参照する変数を変更した場合にのみ、変更を行うことができます

たとえば、イオン含有量が参照する場合

--ion-background-color: #ffffff

背景色を変更できる唯一の方法は、cssファイルでこれを行うことです

ion-content{
    --ion-background-color:#111D12;
}
14
Edward Choh

このように使用できます...私のページでうまく機能します。

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

私はそれがあなたを助けることを願っています:)

6
user9088454

Android deployでも機能しますバックグラウンドで透明性が必要な場合。このように設定する必要があります。別の方法を試してみましたが、機能しません。この方法だけが機能します。

ion-content {
  --background: rgba(0, 255, 0, 0.5);
}
1
angelhernandez

これを試してください：

    :Host {
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }

//Or 

 page-name{
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }
0
Rahul Jograna

これを試して。

ion-content{
background-color:  #000000(use your color here) !important;
}

それがあなたのために働いているかどうか教えてください

0
Nayan Dubey

1ページのみで背景を変更する場合：

ion-content{
--ion-background-color:  #00ABE1 !important;
}

！importantを忘れないでください。機能しない場合があります。

0
Ivo Nikolov

十分に正確ではないのはあなたのCSSセレクターかもしれません。

これを試して ：

ion-content.fondologin{
    background-color: #111D12!important;
}

それでも動作しない場合は、イオンコンテンツ要素を調べて、CSSを見つけようとし、どのプロパティまたは他のセレクタがそれをオーバーライドしているのかを調べます

0
rguerin