思路:可以用绝对定位方式,让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;
}