Comment mettre une image d'arrière-plan sur une page dans Uniapp

À mesure que le développement d'applications mobiles devient de plus en plus populaire, le développement d'applications mobiles multiplateformes est progressivement devenu une tendance. En tant qu'outil de développement multiplateforme, les avantages d'UniApp sont évidents. Dans le développement d’UniApp, il est souvent nécessaire de définir une image de fond pour embellir la page et permettre aux utilisateurs de mieux utiliser l’application. Alors, comment UniApp met-il une image de fond sur une page ? Discutons-en ensemble.

Tout d'abord, nous devons préparer une image d'arrière-plan, qui peut être une image de couleur unie ou une image d'arrière-plan à motif. Ensuite, nous pouvons choisir d'ajouter un style où la balise view est utilisée pour définir l'image d'arrière-plan. Par exemple :

De cette façon, nous avons besoin pour ajouter la classe .bg au fichier de style comme suit :

.bg{
width : 100%;
height : 100%;
background-size : cover;
background-repeat : no-repeat ;
background-position : center center;
}

Ici, nous devons noter que le chemin de l'image doit utiliser un chemin relatif ou un chemin absolu. Le chemin de l'image par défaut d'UniApp est /static/. Dans le même temps, nous devons définir la taille et la position de l'image. Ici, nous utilisons l'attribut cover et l'attribut center.

Si nous devons définir une image d'arrière-plan en plein écran, nous pouvons ajouter le code suivant au fichier uni.scss :

page{
hauteur : 100 %;
.bg{

position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;

}
}

Ici, nous utilisons L'attribut position est utilisé pour définir la position de l'élément, et les attributs top, left, right et bottom sont utilisés pour déterminer la position occupée par l'élément. Enfin, l'effet d'affichage plein écran est obtenu.

Bien sûr, nous pouvons également définir l'image d'arrière-plan globale via uni-app-preview. La méthode spécifique est la suivante :

Ajoutez le code suivant à la balise de style dans le fichier App.vue :

Nous utilisez uniquement cette méthode. Elle doit être définie dans le fichier App.vue pour définir l'image d'arrière-plan globale.

En bref, UniApp propose de nombreuses façons de définir des images d'arrière-plan, et nous devons choisir en fonction de nos propres besoins et scénarios. Les méthodes ci-dessus ne sont que quelques-unes des méthodes que vous pouvez choisir en fonction de la situation réelle. À mesure qu'UniApp continue de se développer et de s'améliorer, je pense qu'il y aura de plus en plus de moyens pratiques de définir des images d'arrière-plan.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!