Vue-cli 中为单独页面设置背景色的方法
来源:互联网 发布:淘宝模特多少钱一天 编辑:程序博客网 时间:2024/06/05 03:18
例子:
<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%
0 0
- Vue-cli 中为单独页面设置背景色的方法
- Vue给单独页面添加背景色
- webkit 设置body背景色为透明的方法
- 为grid设置背景色(X5中)
- 设置UILabel的背景色为透明
- CSS设置页面背景色
- javascript 中控件背景色的设置
- 设置对话框中控件的背景色
- MFC中设置窗体的背景色
- Android中activity背景色的设置
- Android中activity背景色的设置
- GridView中设置前两行的背景色
- Android中activity背景色的设置
- div中背景色的设置
- 为元素设置背景色
- 为文本设置背景色
- 设置图片为背景色
- 为eclipse设置背景色
- EXP-00026: conflicting modes specified
- Spark DAG之划分Stage
- Eclipse+Maven工程异常:Plugin execution not covered by lifecycle configuration
- 一、Elevator
- Java Comparable接口的使用与自定义实现
- Vue-cli 中为单独页面设置背景色的方法
- 数组之求无序数组中的min和max
- [cocos2dx]Cocos2d-x在win7下android环境搭建
- 百度富文本编辑器 UEditor 1.4.3 getContent会报错:Uncaught TypeError
- 判断字符串是否回文
- 数位DP导学模板
- SpringMVC实现文件上传
- 二、Climbing Worm
- 网站迁站工作步骤