vue實現(xiàn)背景圖片鋪滿整個屏幕(適配所有機型)
更新時間：2024年10月16日 09:03:24 作者：性野喜悲
在網(wǎng)頁設計中,背景全屏是一種常見的視覺效果,通過正確的CSS樣式設置,可以實現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過滾動條查看剩余內(nèi)容,這種設計可以提升用戶的瀏覽體驗,使網(wǎng)頁看起來更加整潔和專業(yè)
vue背景圖片鋪滿整個屏幕
背景全屏，不用定位內(nèi)容完全顯示且可滾動查看
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)容超出一屏會顯示不全,不可滾動查看內(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)容完全顯示且可滾動查看
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創(chuàng)建鋪滿整個頁面的背景圖
最近在做登陸頁面時，遇到背景圖不能完全展示，圖片會自動切割重復顯示等情況。經(jīng)過一番搜索大佬的方法后終于發(fā)現(xiàn)解決方法。
網(wǎng)上一搜都是一堆的復雜方法，經(jīng)過精簡之后 代碼如下。
<!-- 布局容器 --> <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>總結
總結以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
element?ui?watch?el-input賦值之后無法刪除或修改問題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了vue3+vant4封裝日期時間組件方式(年月日時分秒),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了key在Vue列表渲染時究竟起到了什么作用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文介紹了Pinia的使用方法及如何實現(xiàn)狀態(tài)持久化存儲,首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細說明了如何通過Pinia-plugin-persistedstate插件實現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊2024-10-10
vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造
這篇文章主要介紹了vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造,home.vue 組件有了兩個屬性：navs 和 tts 屬性，具體實例代碼大家跟隨小編一起通過本文學習吧2018-09-09
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
基于Vue3和Element Plus實現(xiàn)可擴展的表格組件
在開發(fā)過程中,我們經(jīng)常需要創(chuàng)建具有復雜功能的表格組件,本文將介紹如何使用 Vue 3 和 Element Plus 庫來構建一個可擴展的表格組件,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
在本篇文章里小編給大家分享的是一篇關于vue props 單項數(shù)據(jù)流實例分享內(nèi)容，需要的朋友們可以參考下。2020-02-02
Vue3利用vue-plugin-hiprint插件實現(xiàn)無預覽打印功能
在MES管理系統(tǒng)中需要實現(xiàn)條碼數(shù)據(jù)從接口返回后,直接調(diào)用打印機進行打印,跳過瀏覽器的預覽確定那一步,在嘗試很多JS的方式和插件后,都無法實現(xiàn)該功能,所以本文介紹了Vue3如何利用vue-plugin-hiprint插件實現(xiàn)無預覽打印功能,需要的朋友可以參考下2025-04-04