vue实现背景图片铺满整个屏幕(适配所有机型)

更新时间：2024年10月16日 09:03:24 作者：性野喜悲

在网页设计中,背景全屏是一种常见的视觉效果,通过正确的CSS样式设置,可以实现背景全屏且内容在固定一屏大小内完全显示,如果内容超出一屏,则可以通过滚动条查看剩余内容,这种设计可以提升用户的浏览体验,使网页看起来更加整洁和专业

vue背景图片铺满整个屏幕

背景全屏，不用定位内容完全显示且可滚动查看

html:
<div id="home"></div>

css:
<style>
#home {
  width: 100%;
  min-height: 100vh;
  background: url("~@/images/home/h_bg.png") center center no-repeat;
  background-size: 100% 100%;
  
}
</style>

固定一屏大小,内容超出一屏会显示不全,不可滚动查看内容

html:
<div id="home"></div>

css:
<style>
#home {
  width: 100%;
  height: 100vh;
  background: url("~@/images/home/h_bg.png") center center no-repeat;
  background-size: 100% 100%;
  position: fixed;//固定定位
}
</style>

背景全屏，内容完全显示且可滚动查看

html:
<div id="home"></div>

css:
<style>
#home {
  width: 100%;
  height: 100vh;
  background: url("~@/images/home/h_bg.png") center center no-repeat;
  background-size: 100% 100%;
  position:absolute;//绝对定位
}
</style>

vue创建铺满整个页面的背景图

最近在做登陆页面时，遇到背景图不能完全展示，图片会自动切割重复显示等情况。经过一番搜索大佬的方法后终于发现解决方法。

网上一搜都是一堆的复杂方法，经过精简之后代码如下。

<!-- 布局容器 -->
 <div id="all"></div>

使用top和left去除默认和浏览器的边距，设置背景图重复方式为no-repeat不重复

设置宽度高度为100%盛满全屏设置固定位置不跟随浏览器比例变化而变化

    <style>
        #all {
          top: 0;
          left: 0;
          background: url("@/assets/login/login_bg.jpg") no-repeat;
          background-size: 100% 100%;
          width: 100%;
          height: 100%;
          position: fixed;
        }
    </style>

总结

总结以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vuejs第十一篇组件之slot内容分发实例详解
这篇文章主要介绍了Vuejs第十一篇之slot内容分发组件详解的相关资料
2016-09-09
IE9 elementUI文件上传的问题解决
这篇文章主要介绍了IE9 elementUI文件上传的问题解决，有需要了解IE9 elementUI文件上传的朋友可参考。希望此文章对各位有所帮助
2018-10-10
vue3 setup语法糖下父组件如何调用子组件
这篇文章主要介绍了vue3 setup语法糖下父组件如何调用子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue 插件及浏览器本地存储
这篇文章主要介绍了Vue 插件及浏览器本地存储，插件通常用来为Vue添加全局功能，包含install方法的一个对象。更多相关介绍，需要的小伙伴可以参考下面文章内容
2022-05-05
Vue使用Echarts实现横向柱状图,并通过WebSocket即时通讯更新
这篇文章主要介绍了Vue使用Echarts实现横向柱状图,并通过WebSocket即时通讯更新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
详解vue element plus多语言切换
这篇文章主要为大家介绍了vue element plus多语言切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods
本篇文章主要介绍的是Vue2 this 能够直接获取到 data 和 methods，阅读本文将能学到如何学习调试 vue2 源码、data 中的数据为什么可以用 this 直接获取到、methods 中的方法为什么可以用 this 直接获取到,需要的朋友可以参考一下
2021-09-09
vue实现表格打印功能
常见的打印有JavaScript打印、jQuery、vue打印,这里主要讲述vue使用vue-print-nb进行打印,废话不多说,直接手摸手上代码,感兴趣的朋友可以参考下
2024-01-01
详解vue服务端渲染(SSR)初探
本篇文章主要介绍了详解vue服务端渲染(SSR)初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue+elementUI实现右击指定表格列的单元格显示选择框功能
这篇文章主要介绍了vue+elementUI实现右击指定表格列的单元格显示选择框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03