фоновых изображений для Ionic 4
Обычный дизайн пользовательского интерфейса, применяемый во многих мобильных приложениях, заключается в том, чтобы фоновым изображением служило изображение. Это вопрос, который я неоднократно задавал на форумах Ionic, поэтому я решил воспользоваться моментом и описать лучший подход к достижению этого эффекта.
Если вам нужно прикрепить изображение только к определенной странице, просто перейдите к файлу .scss этой страницы и определите переменную –background . Здесь я установлю изображение для ссылки на bg.jpg , который у меня есть в папке с ресурсами, а также установить параметры того, как он должен отображаться.
ионное содержание {
--background: url(../../assets/bg.jpg) исправлено отсутствие повтора центра/обложки;
} Примечание , путь к активу относится к каталогу страницы.
Но что, если вы хотите, чтобы это изображение использовалось на всех страницах? Затем вы можете переместить код в файл 
scss . Поскольку теперь это применяется на глобальном уровне, нам нужно настроить путь URL:
ионное содержание {
--background: url(/assets/bg.jpg) исправлено отсутствие повтора центра/обложки;
} Первоначально это будет работать, но внимательно следите за переходом от экрана к экрану. Фоновое изображение либо сдвинется, либо на мгновение погаснет.
Это связано с тем, что компонент ion-content, на который мы нацелились с помощью нашего CSS, уничтожается, когда мы переходим от экрана к экрану. Чтобы решить эту проблему, нам нужно помнить, что Ionic по своей сути — это всего лишь веб. Таким образом, вместо того, чтобы сосредоточиться на веб-компонентах Ionic, мы можем подумать о том, какие другие элементы HTML мы могли бы использовать.
Ответ заключается в том, чтобы тег body был элементом, к которому мы прикрепляем наше изображение. Итак, в файле global.scss мы можем добавить:
body {
фон: url(/assets/bg.jpg) исправлен не повторяющийся центр/обложка;
} Однако, если вы только что внесли это изменение, вы обнаружите, что изображение больше не видно.
Это связано с тем, что применяются значения по умолчанию для ионного содержания. Это означает, что цвет заливки теперь используется, таким образом закрывая наше изображение. Чтобы решить эту проблему, нам нужно переопределить это с помощью:
ионное содержание {
--фон: нет;
} Теперь у нас будет красивый статический фон для приложения.
Нравится:
Нравится Загрузка…
Опубликовано Крисом Гриффитом в Design, Ionic, User Interface . 1 Комментарий Я руковожу по работе с пользователями в компании, занимающейся домашней автоматизацией и безопасностью, и был инструктором (разработка мобильных приложений) в программе повышения квалификации Калифорнийского университета. Недавно я написал «Разработка мобильных приложений с помощью Ionic» для O’Reilly и стал соавтором «Электрон: от новичка до профессионала». Я также являюсь профессионалом сообщества Adobe и чемпионом по сборке PhoneGap.
