Vue-cli怎么為單獨(dú)頁(yè)面設(shè)置背景色

這篇文章主要介紹了Vue-cli怎么為單獨(dú)頁(yè)面設(shè)置背景色的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue-cli怎么為單獨(dú)頁(yè)面設(shè)置背景色文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

<template>
 <div class="finish-wrap">
  <div class="finish-header">
   <div class="finish-img">
   </div>
  </div>
  <div class="finish-tip">
   支付成功
  </div>
  <div class="finish-footer">
    <router-link to="/">學(xué)車所需資料</router-link>
    <span>
     <router-link to="/">學(xué)車考照流程</router-link>
    </span>
  </div>
 </div>
</template>

1.如果直接在css中設(shè)置body的background-color，會(huì)導(dǎo)致其他頁(yè)面的背景色響應(yīng)改變，所以不可??；

2.如上面例子如果設(shè)置.finish-wrap的背景色以及高度為100%時(shí)，會(huì)發(fā)現(xiàn)只是一部分的背景色發(fā)現(xiàn)改變，卻不能使整個(gè)屏幕背景色變化；

原因：打開app.vue，你會(huì)看到

<template>
    <div>
     <router-view></router-view>
    </div>
   </template>

原因就是這里還有一層div，所以你改變的不是最外層的div背景色，但是你有不能修改這里，所以：

解決方法：

我們要讓.finish-wrap脫離文檔流，為他添加個(gè)fixed屬性，最后結(jié)果：

.finish-wrap
background-color rgb(255,255,255)
height: 100%
position: fixed
width: 100%

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

關(guān)于“Vue-cli怎么為單獨(dú)頁(yè)面設(shè)置背景色”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue-cli怎么為單獨(dú)頁(yè)面設(shè)置背景色”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。