vue實現(xiàn)背景圖片鋪滿整個屏幕(適配所有機型)
更新時間：2024年10月16日 09:03:24 作者：性野喜悲
在網(wǎng)頁設(shè)計中,背景全屏是一種常見的視覺效果,通過正確的CSS樣式設(shè)置,可以實現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過滾動條查看剩余內(nèi)容,這種設(shè)計可以提升用戶的瀏覽體驗,使網(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)容超出一屏?xí)@示不全,不可滾動查看內(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)建鋪滿整個頁面的背景圖
最近在做登陸頁面時，遇到背景圖不能完全展示，圖片會自動切割重復(fù)顯示等情況。經(jīng)過一番搜索大佬的方法后終于發(fā)現(xiàn)解決方法。
網(wǎng)上一搜都是一堆的復(fù)雜方法，經(jīng)過精簡之后 代碼如下。
<!-- 布局容器 --> <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é)以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue2.x background:url()的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在Web應(yīng)用程序中,實現(xiàn)拖拽和排序功能是非常常見的需求,本文為大家介紹了如何使用Vue來實現(xiàn)一個簡單但功能強大的拖拽與排序功能,感興趣的小伙伴可以參考下2023-10-10
這篇文章主要介紹了vue :src 文件路徑錯誤問題的簡單解決方法，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例
下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue 實現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能
這篇文章主要介紹了vue 實現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue項目中添加鎖屏功能的實現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
文章介紹了如何使用高德地圖API進行地圖顯示和搜索功能的實現(xiàn),包括功能介紹、申請高德地圖key的步驟以及Vue頁面和Java后臺方法的實現(xiàn)2026-01-01
Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue實現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09