思路:可以用绝对定位方式,让div占满屏幕,css样式如下:
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
例子:
render() {
return (
< body >
< div className= "container" >
< h1 className= "login-title" >Computer Examination </ h1 >
< Form onSubmit= {this. handleSubmit } className= "login-form" >
< FormItem >
< Input prefix= { < Icon type= "user" style= {{ color: 'rgba(0,0,0,.25)' } } /> } placeholder= "管理员账号/职工号/学号" />
</ FormItem >
< FormItem >
< Input prefix= { < Icon type= "lock" style= {{ color: 'rgba(0,0,0,.25)' } } /> } type= "password" placeholder= "密码" />
</ FormItem >
< FormItem >
< Checkbox className= "login-form-checkbox" >记住我 </ Checkbox >
< a className= "login-form-forgot" href= "" >忘记密码 </ a >
< Button type= "primary" htmlType= "submit" className= "login-form-button" >
登陆
</ Button >
</ FormItem >
</ Form >
</ div >
</ body >
);
}
css:
.container {
text-align: center;
background-image: url( ../images/backImg.jpg);
height: 100%;
width: 100%;
background-size: cover;
position: absolute;
top: 0px;
bottom: 0px;
}
版权声明:本文为qq_33323251原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。