How to set background color IONIC 4

问题

I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:

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

In my sass I have:

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

The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?

回答1:

For some reason I solved it this way:

First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.

In my Page scss I wrote:

ion-content{

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

After that the background was successful set.

回答2:

I am going to repost the top commented answer , with an extra explanation

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

Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works

As such, any modification can only be made if you change the variable that the component references

for example, if ion content references

--ion-background-color: #ffffff

The only way you can modify the background color is by doing this in your css file

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

回答3:

You can use like this...working good on my page.

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

I hope it helps you :)

回答4:

Also works in android deploy, If you need transparency in your background. You must setup like this way, i tried another way but doesn't work, only this way works for me.

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

回答5:

Try this.

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

and let me know it is working for you or not

回答6:

It might be you CSS selector that is not enough acurate.

Try this :

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

If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it

回答7:

Try this one:

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

//Or 

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

回答8:

For changing the background on only one page:

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

Do not forget the !important or it might not work.

来源：https://stackoverflow.com/questions/53531819/how-to-set-background-color-ionic-4

标签

angular

ionic-framework

ionic4