vue移动端设置全屏背景

【金融科技蚂蚁】

已于 2023-06-29 08:43:46 修改

阅读量1.3k

点赞数 1

分类专栏：前端vue项目文章标签： vue.js 前端 html5 html css

于 2023-05-30 15:01:43 首次发布

本文链接：https://blog.csdn.net/liu__yuan/article/details/130947804

版权

前端vue项目专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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>

【金融科技蚂蚁】

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue移动端设置全屏背景

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

扫一扫