Question

下面的图片非常令人失望。

我想在页面的中央和中间设置登录表单和模糊的背景图像，但在放置图像后，它会下降。

我使用zIndex，但它不起作用。

我正在使用react语义ui，并且不确定如何实现它。我对这个框架比较陌生。

直接用html和css做事会完成这个伎俩。

请查看提供的图像。谢谢你们！

import React, { Component } from 'react'
import { Grid, Header, Form, 
  Segment, Button, Divider, Image } from 'semantic-ui-react'

export default class LoginView extends React.Component {
  render() {
    return (

      // <div style={{ position: 'absolute' }}>
      <div>
        <style>
          {`
            body > div,
            body > div > div,
            body > div > div > div.login-form {
              height: 100%;
            }`
          }
        </style>

        <Image style={{ zIndex: 0 }} fluid src='/images/home.gif' />

        <Grid style={{ zIndex: 1 }}
          textAlign='center'
          style={{ height: '100%' }}
          verticalAlign='middle'
          >
          <Grid.Column style={{ maxWidth: 450 }}>
            <Segment piled style={{ paddingTop: '2em', paddingBottom: '2em' }}>
              <Header textAlign='center'>
                <Header.Subheader>
                  HELLO, FRIEND!
                </Header.Subheader>
                <div>
                  Login to your <i>mnmltaskr</i> account
                </div>
              </Header>
              <Form>
                <Form.Input
                  fluid
                  icon='user'
                  iconPosition='left'
                  placeholder='Email address' />
                <Form.Input
                  fluid
                  icon='lock'
                  iconPosition='left'
                  placeholder='Password'
                  type='password' />

                <Button fluid>Login</Button>
              </Form>
              <Divider />
              <Button basic fluid>Sign up instead</Button>
            </Segment>
          </Grid.Column>
        </Grid>
      </div>
    )
  }
}

用反应语义ui设置背景图像

0 个答案: