vue實(shí)現(xiàn)背景圖片鋪滿整個(gè)屏幕(適配所有機(jī)型)

更新時(shí)間：2024年10月16日 09:03:24 作者：性野喜悲

在網(wǎng)頁(yè)設(shè)計(jì)中,背景全屏是一種常見(jiàn)的視覺(jué)效果,通過(guò)正確的CSS樣式設(shè)置,可以實(shí)現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過(guò)滾動(dòng)條查看剩余內(nèi)容,這種設(shè)計(jì)可以提升用戶的瀏覽體驗(yàn),使網(wǎng)頁(yè)看起來(lái)更加整潔和專業(yè)

vue背景圖片鋪滿整個(gè)屏幕

背景全屏，不用定位內(nèi)容完全顯示且可滾動(dòng)查看

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>

固定一屏大小,內(nèi)容超出一屏?xí)@示不全,不可滾動(dòng)查看內(nèi)容

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>

背景全屏，內(nèi)容完全顯示且可滾動(dòng)查看

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;//絕對(duì)定位
}
</style>

vue創(chuàng)建鋪滿整個(gè)頁(yè)面的背景圖

最近在做登陸頁(yè)面時(shí)，遇到背景圖不能完全展示，圖片會(huì)自動(dòng)切割重復(fù)顯示等情況。經(jīng)過(guò)一番搜索大佬的方法后終于發(fā)現(xiàn)解決方法。

網(wǎng)上一搜都是一堆的復(fù)雜方法，經(jīng)過(guò)精簡(jiǎn)之后代碼如下。

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

使用top和left去除默認(rèn)和瀏覽器的邊距，設(shè)置背景圖重復(fù)方式為no-repeat不重復(fù)

設(shè)置寬度高度為100%盛滿全屏設(shè)置固定位置不跟隨瀏覽器比例變化而變化

    <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>

總結(jié)

總結(jié)以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒)
這篇文章主要介紹了vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解key在Vue列表渲染時(shí)究竟起到了什么作用
這篇文章主要介紹了key在Vue列表渲染時(shí)究竟起到了什么作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue3 pinia使用及持久化注冊(cè)
本文介紹了Pinia的使用方法及如何實(shí)現(xiàn)狀態(tài)持久化存儲(chǔ),首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細(xì)說(shuō)明了如何通過(guò)Pinia-plugin-persistedstate插件實(shí)現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊(cè)
2024-10-10
vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造
這篇文章主要介紹了vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造,home.vue 組件有了兩個(gè)屬性：navs 和 tts 屬性，具體實(shí)例代碼大家跟隨小編一起通過(guò)本文學(xué)習(xí)吧
2018-09-09
Vue編譯器optimize源碼分析
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
基于Vue3和Element Plus實(shí)現(xiàn)可擴(kuò)展的表格組件
在開(kāi)發(fā)過(guò)程中,我們經(jīng)常需要?jiǎng)?chuàng)建具有復(fù)雜功能的表格組件,本文將介紹如何使用 Vue 3 和 Element Plus 庫(kù)來(lái)構(gòu)建一個(gè)可擴(kuò)展的表格組件,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-07-07
vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享
在本篇文章里小編給大家分享的是一篇關(guān)于vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享內(nèi)容，需要的朋友們可以參考下。
2020-02-02
Vue3利用vue-plugin-hiprint插件實(shí)現(xiàn)無(wú)預(yù)覽打印功能
在MES管理系統(tǒng)中需要實(shí)現(xiàn)條碼數(shù)據(jù)從接口返回后,直接調(diào)用打印機(jī)進(jìn)行打印,跳過(guò)瀏覽器的預(yù)覽確定那一步,在嘗試很多JS的方式和插件后,都無(wú)法實(shí)現(xiàn)該功能,所以本文介紹了Vue3如何利用vue-plugin-hiprint插件實(shí)現(xiàn)無(wú)預(yù)覽打印功能,需要的朋友可以參考下
2025-04-04