Vue-cli中為單獨版面設定背景色的實現方法，vue-cli背景

Vue-cli中為單獨版面設定背景色的實現方法，vue-cli背景

例子：

<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="/">學車所需資料</router-link>    <span>     <router-link to="/">學車考照流程</router-link>    </span>  </div> </div></template>

1.如果直接在css中設定body的background-color，會導致其他頁面的背景色響應改變，所以不可取；

2.如上面例子如果設定.finish-wrap的背景色以及高度為100%時，會發現只是一部分的背景色發現改變，卻不能使整個螢幕背景色變化；

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

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

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

解決方案：

我們要讓.finish-wrap脫離文檔流，為他添加個fixed屬性，最後結果：

.finish-wrapbackground-color rgb(255,255,255)height: 100%position: fixedwidth: 100%

以上這篇Vue-cli中為單獨版面設定背景色的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。