vue移动端设置全屏背景

不念不忘少年蓝@ 2023-10-11 23:13 22阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目-设置全屏背景

在最外侧的盒子上绑定样式即可 <template> <div class="bg"> ... </div> </tem

忘是亡心i/ 2024年03月23日 15:04/ 0 赞/ 87 阅读

相关 vue移动端设置全屏背景

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

不念不忘少年蓝@/ 2023年10月11日 23:13/ 0 赞/ 23 阅读

相关 Vue设置背景图片(全屏背景),实际操作与踩雷.

最近一直困扰我一个背景问题,也是Vue的项目,问题就是在Vue上添加一个好看的背景,每次去网上查的时候,几乎所有插过来的答案都是一样的,我一度怀疑他们理解的背景和我理解的背景是

╰半橙微兮°/ 2023年07月03日 02:56/ 0 赞/ 10 阅读

相关 vue 设置整屏背景色音乐播放

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

阳光穿透心脏的1/2处/ 2023年06月25日 08:07/ 0 赞/ 6 阅读

相关网站背景全屏代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

缺乏、安全感/ 2023年01月19日 03:05/ 0 赞/ 8 阅读

相关设置移动端网页端背景图片

下面展示一些 `内联代码片`。 <image class="image-bg" src="../../static/bgi4.png"/>

红太狼/ 2022年12月25日 04:50/ 0 赞/ 233 阅读

相关 android最外层全屏背景,如何给android设置全屏背景图片，及设置Github代码库

okBaby:android jakelee$ git remote -v originhttps://github.com/idatafox/android.git (fe

小咪咪/ 2022年10月17日 13:47/ 0 赞/ 194 阅读

相关微信小程序---背景全屏设置

实现效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

系统管理员/ 2022年08月29日 11:59/ 0 赞/ 236 阅读

相关背景图全屏问题

html,body\{ padding: 0; margin: 0; width: 100%;

喜欢ヅ旅行/ 2022年06月02日 08:20/ 0 赞/ 244 阅读

相关 Vue - 移动端项目初始设置

移动端项目初始设置一. 引入完整meta 二. 引入 reset.css 文件，初始化项目样式三. 解决 1 物理像素边框问题四. 解决某些

红太狼/ 2021年07月25日 13:01/ 0 赞/ 439 阅读