vue移动端设置全屏背景的项目实践

 更新时间:2023年08月08日 10:44:46   作者:【金融科技蚂蚁】  
本vue移动端项目设置全屏背景,关键是要找对文件,然后添加background属性即可,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

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>

到此这篇关于vue移动端设置全屏背景的项目实践的文章就介绍到这了,更多相关vue移动端设置全屏背景内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue前后端分离如何解决每次请求session都会变的问题

    vue前后端分离如何解决每次请求session都会变的问题

    这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue 3自定义指令开发的相关总结

    Vue 3自定义指令开发的相关总结

    这篇文章主要介绍了Vue 3自定义指令开发的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • mpvue开发音频类小程序踩坑和建议详解

    mpvue开发音频类小程序踩坑和建议详解

    这篇文章主要介绍了mpvue开发音频类小程序踩坑和建议详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue基础语法知识梳理上篇

    Vue基础语法知识梳理上篇

    这篇文章主要介绍了Vue基础语法知识梳理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-12-12
  • vue.js实现只能输入数字的输入框

    vue.js实现只能输入数字的输入框

    这篇文章主要为大家详细介绍了vue.js实现只能输入数字的输入框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题

    ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题

    这篇文章主要介绍了ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    本文主要介绍了Vue3刷新页面报错404的解决方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue结合高德地图实现HTML写自定义信息弹窗全过程

    Vue结合高德地图实现HTML写自定义信息弹窗全过程

    最近开发中遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,下面这篇文章主要给大家介绍了关于Vue结合高德地图实现HTML写自定义信息弹窗的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue-preview动态获取图片宽高并增加旋转功能的实现

    vue-preview动态获取图片宽高并增加旋转功能的实现

    这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vuex 中辅助函数mapGetters的基本用法详解

    vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,在组件或界面中不使用mapGetter调用映射vuex中的getter,在组件或界面中使用mapGetter调用映射vuex中的getter,具体内容跟随小编一起通过本文学习吧 
    2021-07-07

最新评论