ionic 4: изменение фонового содержания ионов не работает

Question

Я попытался в global.scss как

ion-content{
    background-image: url('assets/images/cover.jpg');
    -webkit-background-image: url('assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
  }

, но это не делает изображение.пробовал путь как ./assets/images/cover.jpg.

, если я помещаю то же изображение, что и тег img, на страницу, которая показывает исключение возможности недопустимого изображения.

Я такжепопытался поместить в homeage.scss как

.myview {
    background-image: url('../../assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}

и используя class = "myview" в home.html не повезло

Answer 1

04-05-2019

Это рабочее решение для меня.

ion-content {
    --background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}

Answer 2

Я решил проблему, выполнив следующее:

ion-content {
    --background: none;
    background-image: url('/assets/imgs/page_bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Это отключит фон и затем установит правильный.

Answer 3

Я столкнулся с подобной ситуацией, поскольку свойство css для ионного фона приводит к проблемам с мерцанием в IOS

. Попробуйте следующее, если вы столкнулись с проблемой мерцания

:host {
  ion-content {
    --background:none;
    background:url(''../../assets/images/cover.jpg');
    background-size: cover;
    background-position: center center;
  }
}

для всех, у кого есть проблемы с клавиатурой(изменение размера фона при отображении клавиатуры) установите плагин Keyboard

https://ionicframework.com/docs/native/keyboard/

и добавьте следующий код в свой config.json

<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />

Примечание: это может скрыть элемент под клавиатурой, когда он отображается (я тестировал только на iOS)

Answer 4

Я попытался ответить от @rchau, но в моем случае это не сработало.Вместо этого я поместил этот код в свой проект, и он сделал правильную вещь:

ion-content{
    --background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}

Answer 5

Вы можете использовать CSS-переменную --background для изменения фона ионного содержимого.

Пример:

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

Вставьте это в свои компоненты, страницы или глобальные scss.

Для справки см .: https://beta.ionicframework.com/docs/api/content#css-custom-properties