web-dev-qa-db-fra.com

ionique 4: le fond changeant contenant des ions ne fonctionne pas

j'ai essayé dans global.scss as 

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

mais cela ne rend pas l'image. chemin essayé comme ./assets/images/cover.jpg ainsi.

si je mets la même image que balise img sur la page qui s'affiche en excluant la possibilité d'image non valide.

J'ai aussi essayé de mettre dans le homeage.scss comme

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

et en utilisant class = "myview" dans home.html pas de chance

ionic-frameworkionic4
2
Vik

Vous pouvez utiliser la variable CSS --background pour modifier l’arrière-plan du contenu ionique.

Exemple:

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

Mettez cela dans vos composants, pages ou scss global.

Pour référence, voir: https://beta.ionicframework.com/docs/api/content#css-custom-properties

11
Gary Großgarten

J'ai rencontré la même situation, le fait d'avoir des propriétés de fond CSS ioniques provoque des problèmes de scintillement sous IOS

essayez ce qui suit si vous avez rencontré un problème de scintillement

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

pour toute personne ayant des problèmes de clavier (redimensionnement de l'arrière-plan sur l'affichage du clavier), installez le plug-in Keyboard

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

et ajoutez le code suivant sur votre config.json

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

Remarque: cela peut masquer un élément sous le clavier lorsqu'il est affiché (j'ai testé uniquement sur iOS)

0
kishorekumaru