Ionic4 Фоновое изображение
Есть ли способ использовать изображение в качестве фона на IONIC4? Я нигде не могу найти в документации, и любой применяемый мной класс CSS не работает. Есть свойство host, которое всегда берет на себя фон.
Я попытался установить для ion-content прозрачный фон, создав свойство под названием «trans» в теме / variables.scss.
.ion-color-trans {
--ion-color-base: transparent;
}
а в html-файле я назвал <ion-content color = "trans"> проблема в том, что приложение работает до смешного медленно. При переходе между страницами наблюдаются задержки при записи и мигает фон.
Обновлено:
После исследования, как будто завтра не наступит, я нашел способ исправить это. В файле SCSS этой конкретной страницы / компонента добавьте следующую строку:
:host {
ion-content {
--background: url('../../assets/images/[email protected]');
}
}
Привет, @Yoarthur, спасибо за подсказку, это не помогает: /
возможно, используя переменную --background, которая лежит в теме. Это должно сработать.
Вместо публикации обновления вы можете ответить на свой вопрос
@VarunSukheja до сих пор нет ответа. Обновления были на тот случай, если я или кто-то еще столкнется с временными решениями, пока есть окончательное решение.
Ответы 4
Ионный 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 - непрозрачность в линейном градиенте фона.
Ionic 4 решение, сокращение:
:host {
ion-content {
--background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
}
}
Для ionic версии 4 он использует так называемую технику Shadow DOM, которая мешает вам сделать это,
Запустите приложение и проверьте тело или ионное содержимое, я имею в виду, вы найдете некоторые проверенные элементы, завернутые в <shadow-root>, что указывает на то, что все мои внутренние элементы являются частными. Единственный способ их редактировать с помощью предоставленных переменных, поэтому для вашей проблемы попробуйте следующий:
ion-content {
--ion-background-color: transparent !important;
}
Поместите это в свои компоненты или страницы scss.
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
Создайте класс
.bg-transparent {background-color: transparent !important}и добавьте к нему