css - 如何在 CSS 中显示背景颜色不起作用？

Question

我创建了一个登录表单，我希望背景颜色是渐变的。所以我添加了 div 标签，为此我添加了背景渐变，对于登录表单，我添加了白色背景，但是整个背景没有显示渐变，为什么这样(见截图)？

代码:

loginForm.js

return(
          <div className={styles.container}>
          <Form className={styles.formStyle} onSubmit={this.handleSubmit}>
            <Header className={styles.title} as='h1'>Account Portal Login</Header>
            <Header className={styles.info} as='h5'>Please login with your URN number. If you have not been assigned a
            password, you can create one below and login afterwards</Header>
            <Header className={styles.info} as='h4'>Please login below</Header>
            <Form.Field>
              <Form.Input label="URN number" value={urnNumber} placeholder="Enter URN number" onChange={this.handleChange}/>
            </Form.Field>
            <Form.Field>
              <Form.Input type="password" label="Password" value={password} placeholder="Enter password" onChange={this.handleChange}/>
            </Form.Field>
            <Button className={styles.loginButton}>Login</Button>
          </Form>
          </div>
        )

loginForm.module.css:

.container {
    background: linear-gradient(to top right, #b08fe6 0%, #a8cef3 100%);
}

.formStyle  {
    margin-left: 500px !important; 
    margin-top: 120px !important;
    width: 550px !important;
    height: 420px !important;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    box-shadow: 0 0 5px 0;
    background: white;
}

注意:我使用的是 React 语义 UI 库。在下面的屏幕截图中，背景渐变应该出现在整个屏幕上，而不仅仅是在登录表单后面。截图:

Answer 1

容器div应该覆盖整个屏幕

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
   background: linear-gradient(to top right, #b08fe6 0%, #a8cef3 100%);
  }