vue body的背景圖片屬性設(shè)置方式
更新時(shí)間：2025年08月20日 17:24:19 作者：AI小奶龍
在Vue中,背景圖跨頁面顯示問題可通過生命周期鉤子（如mounted和beforeDestroy）實(shí)現(xiàn)動(dòng)態(tài)控制,確保僅在主頁加載背景圖,登錄頁等其他頁面可移除,從而實(shí)現(xiàn)差異化樣式應(yīng)用
vue body的背景圖片屬性設(shè)置
html {
height: 100%;
}
/* 設(shè)置整個(gè)頁面的樣式 */
body{
/* 引用圖片路徑 */
background-image: url("../assets/img/shouye.jpg");
/* background-repeat只顯示一個(gè)圖片 */
background-repeat: no-repeat;
/* background-size
將一個(gè)圖片撐滿一個(gè)頁面 */
background-size: 100% 100%;
}在body中使用background-image我們會(huì)遇到以下問題
只想在一個(gè)頁面中使用這張背景圖，但是在別的頁面中也會(huì)顯示，如：
如圖，我只想在主頁面顯示這張背景圖，可是在登錄頁面中也被使用了。
后來通過查閱相關(guān)資料，我明白了vue的生命周期的使用。
在主頁面加入這兩個(gè)方法
// 組件內(nèi)路由進(jìn)入組件時(shí)
beforeRouteEnter(to, from,next){
window.document.body.style.backgroundImage=''
next()
},
// 組件內(nèi)路由離開組件時(shí)
beforeRouteLeave(to, from,next){
window.document.body.style.backgroundImage='url("../assets/img/shouye.jpg")'
next()
},就可以在登錄頁面中刪除這張背景圖，不顯示。
這樣就可以在別的頁面中使用別的背景圖了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-resource攔截器設(shè)置頭信息的實(shí)例
下面小編就為大家?guī)硪黄獀ue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們2023-08-08
這篇文章主要介紹了詳解Weex基于Vue2.0開發(fā)模板搭建,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼，本文給大家分享實(shí)現(xiàn)思路，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue組件跨層級(jí)獲取組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3使用vue3-print-nb main.ts報(bào)錯(cuò)聲明文件找不到的解決
在Vue3中使用vue3-print-nb時(shí),因第三方包類型文件缺失導(dǎo)致全局引入報(bào)錯(cuò),手動(dòng)聲明可解決,打印預(yù)覽需清除標(biāo)題、地址等樣式以優(yōu)化輸出,理解原理靈活應(yīng)對(duì)問題2025-07-07
詳解Vue-cli來構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue條件渲染與列表渲染，條件渲染包括v-if、v-show等內(nèi)容，文章對(duì)條件渲染及列表渲染介紹詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了vue百度地圖實(shí)現(xiàn)自定義彈框樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03