Ионное полноэкранное фоновое изображение

Я новичок в Ionic framework, и я пытаюсь запустить приложение с полноэкранным фоновым изображением, например:

введите описание изображения здесь

Мне удалось удалить строку состояния, которая была показана в учебнике. Но как мне добавить полноэкранное изображение? Когда я добавил это в style.css, он не отреагировал:

html, body{
  background-image: black;
}

ionic-framework css
person Sinan Samet    schedule 28.05.2014    source источник

Ответы (8)


arrow_upward
30
arrow_downward

В вашем css попробуйте:

  .scroll-content {
    background: url(image) [add image position info here];

    [add any more properties here]

  }

Это установит фон для всей области содержимого.

person Mr MT    schedule 01.06.2014
comment
Это работает, но не для панели навигации, на которой у меня есть hide-nav-bar = true. Я действительно хочу полностью удалить это. - person Sinan Samet; 02.06.2014

arrow_upward
16
arrow_downward

in 

ion-view class="pane"

все отрисовано ... я не пробовал, но думаю, вы справитесь с этим с


    .pane {
        background: url(image) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }
person Helmut    schedule 28.05.2014

arrow_upward
9
arrow_downward

Убедитесь, что в начале пути к изображению стоит "../", это укажет на правильный путь к изображению в папке ресурсов после того, как приложение будет создано для устройства. Использование метода панели, казалось, вызывало проблемы, это было лучшим решением для меня, когда изображение появлялось при обслуживании, но не на моем устройстве Android.

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}
person Aidan Doherty    schedule 07.05.2015

arrow_upward
6
arrow_downward

Очень похоже на ответ Хельмута, который работал с использованием «ионной подачи», но дал мне белый фон, когда я нажал на Android (4.2.2 на Nexus 7 в моем случае).

Селектор класса панели правильный, если вы хотите сделать фон в полноэкранном режиме, однако android просто сделал фон белым, если я вообще установил значение «background». Использование "background-image" исправляет ситуацию.

Я обнаружил, что следующее работает на Android и в Chrome (во время веб-тестирования).

.pane {
    background-image: url(image); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
person JDawgg    schedule 03.12.2014

arrow_upward
6
arrow_downward

В Ioinc-5: Создайте в классе home-page.scss.

.class-name {
  --background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
 }

Откройте home-page.html и добавьте класс в ion-content.

<ion-content class="class-name">
person Armaan    schedule 17.04.2020

arrow_upward
4
arrow_downward

Поскольку структура папок недавно изменилась в бета-версии Ionic 2 ...

Путь к вашему изображению должен быть похож на www/img/backgrounds/lake.png, а соответствующий CSS должен гласить:

.myClassName {
    background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Примечание: вам нужно перепрыгнуть на 2 директории, ../../

person Ryan Loggerythm    schedule 08.04.2016

arrow_upward
3
arrow_downward

Ionic 4 Изменить цвет фона ионного содержимого

введите описание изображения здесь

Объясняется здесь Ссылка на источник

ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;  
}
person Code Spy    schedule 10.03.2019

arrow_upward
0
arrow_downward

Попробуйте приведенный ниже код, чтобы изменить URL-адрес вашего изображения с полным фоном на другом устройстве.

  ion-content {
    --background: none;
    background-image: url('https://cdn.wallpapersafari.com/19/81/zOUft6.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
person Bal mukund kumar    schedule 12.01.2021