25 votes

ionique 4: la modification de l'arrière-plan de la teneur en ions ne fonctionne pas

j'ai essayé dans global.scss comme

 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. essayé le chemin comme ./assets/images/cover.jpg également.

si je mets la même image que la balise img sur la page qui apparaît, excluant la possibilité d'une image invalide.

J'ai aussi essayé de mettre le fichier 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

66voto

Gary Großgarten Points 1082

Vous pouvez utiliser la variable CSS --background pour changer 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

19voto

J'ai résolu le problème en procédant comme suit:

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

Cela désactivera l'arrière-plan, puis définira le bon.

0voto

J'ai essayé la réponse de @rchau, mais cela n'a pas fonctionné dans mon cas. Au lieu de cela, j'ai mis ce code dans mon projet et il a fait la bonne chose:

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

0voto

Sampath Points 4405

04-05-2019

C'est la solution de travail pour moi.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X