vue移动端设置全屏背景

        vue移动端项目设置全屏背景,关键是要找对文件,然后添加background属性即可,这里说的全屏背景,是指任意切换页面,背景都还是这个背景,那么只要在入口html文件或者全局vue文件中增加background属性就能达到目的。以下是简单的两种方式:

法一、在入口文件index.html中添加background属性:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta></meta>
        <link></link>
        <title></title>
        <script></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<script>
    自定义脚本内容
</script>

<style>
html body {
    //以下二者选其一
    background: url('./assets/images/sea.jpg');  //图片做背景
    background: #0000FF                          //纯色做背景
}
</style>

法二、在App.vue文件中添加background属性:

<template>
    <div id="app>
        自定义页面内容
        <router-view></router-view>
    </div>
</template>

<script>
    自定义脚本内容
</script>

<style>
#app{
    //以下二者选其一
    background: url('./assets/images/sea.jpg');  //图片做背景
    background: #0000FF                          //纯色做背景
}
</style>

猜你喜欢

转载自blog.csdn.net/liu__yuan/article/details/130947804