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

Question

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

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

В моем sass у меня есть:

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

--ion-background-color: #ffffff

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

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

Answer 5

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

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

Не забудьте! Важно, иначе оно может не сработать.

Answer 6

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

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

//Or 

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

Answer 7

Почему-то я решил это следующим образом:

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

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

ion-content{

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

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

Answer 8

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

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

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

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