Как установить цвет фона IONIC 4

У меня возникли проблемы при попытке изменить цвет фона только на одной странице IONIC 4 (--type = angular). Я пытаюсь добавить класс для содержания ионов. В моем HTML файле у меня есть:

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

По моему sass я имею:

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

Цвет фона никогда не меняется. Если я добавлю --ion-background-color: # 111D12; в variables.scss фон успешно изменяется для каждой страницы, но я просто изменяю цвет на одной странице. Как мне этого добиться?

Ответ 1

По какой-то причине я решил это так:

Прежде всего я добавил --ion-background-color:#ffffff; в файле variables.scss внутри папки темы.

На моей странице scss я написал:

ion-content{

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

После этого фон был успешно установлен.

Ответ 2

Я собираюсь опубликовать ответ с верхним комментарием, с дополнительным объяснением

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

Начиная с ionic 4, компонент Ionic реализует концепцию shadowDOM, и старый метод поиска css-селекторов в компоненте, который реализует shadowDOM, больше не работает

Таким образом, любая модификация может быть сделана, только если вы измените переменную, на которую ссылается компонент

например, если ссылки на содержание ионов

--ion-background-color: #ffffff

Единственный способ изменить цвет фона - это сделать это в вашем CSS файле.

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

Ответ 3

Вы можете использовать как это... хорошо работает на моей странице.

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

Я надеюсь, что это поможет вам :)

Ответ 4

Также работает в развертывании Android, Если вам нужна прозрачность в вашем фоне. Вы должны настроить таким образом, я попробовал другой способ, но не работает, только этот способ работает для меня.

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

Ответ 5

Это может быть ваш CSS-селектор, который недостаточно точен.

Попробуй это:

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

Если он все еще не работает, проверьте ваш элемент ion-content и попробуйте найти ваш CSS, и какое свойство или другой селектор переопределяет его

Ответ 6

Попробуй это:

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

//Or 

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

Ответ 7

Для изменения фона только на одной странице:

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

Не забывайте! Важно, иначе это может не сработать.

Ответ 8

Попробуй это.

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

и дайте мне знать, это работает для вас или нет