Vue-cli中为单独页面设置背景色的实现方法

栏目: 编程语言 · JavaScript · 发布时间: 6年前

内容简介:下面小编就为大家分享一篇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-wrap
background-color rgb(255,255,255)
height: 100%
position: fixed
width: 100%

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

我看电商

我看电商

黄若 / 电子工业出版社 / 2013-6-1 / 39.00元

本书是作者近30年从事及电子商务管理的总结和分享。 近年来电商行业在中国迅猛发展,2012年网络市场规模达到13,000亿人民币,诞生了淘宝、天猫、京东、、凡客、唯品会……等一大批全新的网络公司,电子商务正在日益深入的影响着越来越多人的生活。同时,这个行业连年亏损,顾客服务良莠不齐,也广为人们所关注。作者从地面到电子商务,从跨国公司高管到管理民营企业,从开创天猫模式到带领上市,被业界称为中国......一起来看看 《我看电商》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具