How to modify the page background in uniapp

When developing UniApp applications, we often need to modify the background color, pictures, etc. of each page. UniApp provides a variety of ways to modify the page background. In this article, I will introduce you to some of the most common methods in detail.

1. Modify the background through the style sheet

In the style sheet (style) of each page, we can set the background color or background image of the page through the background attribute. For example, to set the page background to red, you would write:

<style>
    .page{
        background-color: #ff0000;
    }
</style>

This will set the background color of the page to red. Similarly, we can also set the background to an image. For example, to set the background image to logo.png, you can write:

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

<style>
    .page{
        background-image:url('~/static/logo.png');
        background-size:cover;
    }
</style>

In this way, when the page is loaded, the specified image will be used as the page background image.

2. Modify the background through the global style sheet

If we want to uniformly set the background in the entire application, we can do it through the global style sheet (App.vue). In the style sheet of App.vue, we can set the background color and background image through the html and body selectors, as shown below:

<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>

This will set the background color of the entire application to gray, and the background The image is set to bg.png and tiled to cover the entire background area.

3. Set the background through global CSS variables

Another way to modify the page background is through CSS variables. In UniApp, we can define a series of CSS variables in the root component (App.vue), and then use these variables in each page to set the corresponding background color, pictures, etc. The advantage of this method is that we only need to define it once in the root component and then use it repeatedly in different pages, which greatly reduces the amount of code.

Here is an example of setting the background color. First, define a CSS variable named backColor in App.vue, as shown below:

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

<style>
    :root{
        --backColor:#fff;
    }
</style>

Then, in the page where the background needs to be modified, we can use the var() function to reference this variable, as follows As shown:

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

<style>
    .page{
        background-color:var(--backColor);
    }
</style>

In this way, when we need to modify the background color, we only need to modify the backColor variable in the root component without having to modify the style sheet of each page.

Summary:

The above are three common methods for UniApp to modify the page background. They are implemented through style sheets, global style sheets and global CSS variables, each with its own applicable scenarios. No matter which method, we can find more detailed explanations and examples in UniApp's development documentation. We recommend that you study more and find out the method that suits you best.

The above is the detailed content of How to modify the page background in uniapp. For more information, please follow other related articles on the PHP Chinese website!