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

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

例子：

<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，會導(dǎo)致其他頁面的背景色響應(yīng)改變，所以不可?。?/p>

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

原因：打開app.vue，你會看到

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

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