Maison > interface Web > uni-app > le corps du texte

Comment modifier l'arrière-plan de la page dans Uniapp

PHPz
Libérer: 2023-04-27 09:32:09
original
9453 Les gens l'ont consulté

Lors du développement d'applications UniApp, nous devons souvent modifier la couleur d'arrière-plan, les images, etc. de chaque page. UniApp propose différentes façons de modifier l'arrière-plan de la page. Dans cet article, je vais vous présenter en détail certaines des méthodes les plus courantes.

1. Modifier l'arrière-plan via la feuille de style

Dans la feuille de style (style) de chaque page, nous pouvons définir la couleur d'arrière-plan ou l'image d'arrière-plan de la page via l'attribut background. Par exemple, pour définir l'arrière-plan de la page sur rouge, vous écrivez :

<style>
    .page{
        background-color: #ff0000;
    }
</style>
Copier après la connexion

Cela définira la couleur d'arrière-plan de la page sur rouge. De même, nous pouvons également définir l’arrière-plan d’une image. Par exemple, pour définir l'image d'arrière-plan sur logo.png, vous pouvez écrire :

<template>
    <view class="page">
        ...
    </view>
</template>

<style>
    .page{
        background-image:url('~/static/logo.png');
        background-size:cover;
    }
</style>
Copier après la connexion

De cette façon, lors du chargement de la page, l'image spécifiée sera utilisée comme image d'arrière-plan de la page.

2. Modifier l'arrière-plan via la feuille de style globale

Si nous voulons définir l'arrière-plan uniformément dans toute l'application, nous pouvons le faire via la feuille de style globale (App.vue). Dans la feuille de style d'App.vue, nous pouvons définir la couleur d'arrière-plan et l'image d'arrière-plan via les sélecteurs html et body, comme indiqué ci-dessous :

<template>
    <div>
        <router-view/>
    </div>
</template>

<style>
    html,body {
        background-color: #eeeeee;
        background-image: url('~/static/bg.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
Copier après la connexion

Cela définira la couleur d'arrière-plan de l'ensemble de l'application sur gris et l'image d'arrière-plan sur bg . png et placez-le en mosaïque pour couvrir toute la zone d'arrière-plan.

3. Définir l'arrière-plan via des variables CSS globales

Une autre façon de modifier l'arrière-plan de la page consiste à utiliser des variables CSS. Dans UniApp, nous pouvons définir une série de variables CSS dans le composant racine (App.vue), puis utiliser ces variables dans chaque page pour définir la couleur d'arrière-plan, les images, etc. L’avantage de cette méthode est qu’il suffit de la définir une seule fois dans le composant racine puis de l’utiliser de manière répétée dans différentes pages, ce qui réduit considérablement la quantité de code.

Voici un exemple de définition de la couleur d'arrière-plan. Tout d'abord, définissez une variable CSS nommée backColor dans App.vue, comme indiqué ci-dessous :

<template>
    <div>
        <router-view/>
    </div>
</template>

<style>
    :root{
        --backColor:#fff;
    }
</style>
Copier après la connexion

Ensuite, dans la page où l'arrière-plan doit être modifié, nous pouvons utiliser la fonction var() pour référencer cette variable, comme indiqué ci-dessous :

<template>
    <view class="page">
        ...
    </view>
</template>

<style>
    .page{
        background-color:var(--backColor);
    }
</style>
Copier après la connexion

De cette façon, lorsque nous devons modifier la couleur d'arrière-plan, il suffit de modifier la variable backColor dans le composant racine sans avoir à modifier la feuille de style de chaque page.

Résumé :

Ci-dessus sont trois méthodes courantes permettant à UniApp de modifier l'arrière-plan de la page. Elles sont implémentées via des feuilles de style, des feuilles de style globales et des variables CSS globales, chacune avec ses propres scénarios applicables. Quelle que soit la méthode, nous pouvons trouver des explications et des exemples plus détaillés dans la documentation de développement d'UniApp. Nous vous recommandons d'étudier davantage et de découvrir la méthode qui vous convient le mieux.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal