Ionic4 Фоновое изображение - PullRequest
Новая
       50

Ionic4 Фоновое изображение

0 голосов
/ 07 декабря 2018

Эй, ребята, я знаю, это может звучать очень глупо, но есть ли способ использовать изображение в качестве фона на IONIC4?Я ничего не могу найти в документации, и любой класс CSS, который я применяю, не работает.Есть свойство host, которое всегда занимает фон.

Я попытался установить прозрачный фон для содержимого ионов, создав свойство "trans" в theme / variables.scss 

.ion-color-trans {
  --ion-color-base: transparent;
}

и в html-файле, который я назвал <ion-content color="trans">, проблема в том, что приложение работает смехотворно медленно.Имеются задержки при записи и фон мигает при переходе на страницу.





ОБНОВЛЕНИЕ:

Послеисследуя, что завтра нет, я нашел способ это исправить.В файле SCSS этой конкретной страницы / компонента добавьте следующую строку: 

:host {
    ion-content {
      --background: url('../../assets/images/main-bg@2x.png');
    }
  }

Ответы [ 4 ]

0 голосов
/ 21 июля 2019

Поместите это в ваши компоненты или страницы scss.

 ion-content{ 
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
     }
0 голосов
/ 08 марта 2019

Ionic 4 решение, сокращение: 

:host {
  ion-content {
    --background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
  }
}
0 голосов
/ 06 апреля 2019

Для ионной версии 4 он использует так называемую технику Shadow DOM, которая не позволяет вам этого делать,

Запустите ваше приложение и проверьте содержимое или содержание ионов, я имею в виду, вы найдете некоторые проверенные элементы, завернутые в<shadow-root>, который указывает, что все мои внутренние элементы являются частными. Единственный способ их редактирования с помощью предоставленных переменных, поэтому для вашей проблемы попробуйте следующее: 

ion-content {
  --ion-background-color: transparent !important;
}
0 голосов
/ 07 марта 2019

Ionic 4 решение:

Пожалуйста, примените ниже css к вашей странице .scss для идеальной фоновой страницы: 

.page-background-image {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(./../assets/images/mybg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 50vh;
  }

, где 0.5 - непрозрачность в линейном градиенте фона.

...