在uniapp中,给当前页面添加满屏背景颜色,需要给当前组件的根元素添加绝对定位,宽高百分百,然后设置背景颜色
<template> <view class="loginContent"> <view class="logo"> <image src="../../static/QTDD.jpg"></image> </view> <input type="text" v-model="email" placeholder="邮箱" /> <input type="password" v-model="password" placeholder="密码" /> <button class="btn">登录</button> <view class="alertNative"> <view class="retrievePassword">找回密码</view> <view class="register">注册</view> </view> </view> </template> <style> .loginContent{ position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, #ffdde1, #ee9ca7); } //其他不相关的CSS省略.... </style>
第一种:直接给当前组件的根元素添加背景颜色,会导致背景颜色只会出现在内容区域,不会满屏显示
<template> <view class="loginContent"> //省略部分代码 </view> </template> <style> .loginContent{ background: linear-gradient(to bottom, #ffdde1, #ee9ca7); } //其他不相关的CSS省略.... </style>
第二种:给当前组件根元素添加height:100vh,然后添加背景颜色,这种方式虽然能达到效果,但是此时屏幕会出现滚动条,这种体验感不太好
<template> <view class="loginContent"> //省略部分代码 </view> </template> <style> .loginContent{ height:100vh; background: linear-gradient(to bottom, #ffdde1, #ee9ca7); //其他不相关的CSS省略.... </style> }
第三种:在当前组件中给page添加背景颜色,这种方式也能达到效果,但是组件根元素会继承背景颜色,导致背景颜色重叠了
<template> <view class="loginContent"> //省略部分代码 </view> </template> <style> page{ background: linear-gradient(to bottom, #ffdde1, #ee9ca7); //其他不相关的CSS省略.... } </style> }