html css代码示例：登录界面添加背景图片及设置背景透明度

学亮编程手记

于 2024-09-05 13:46:08 发布

阅读量315

点赞数 3

分类专栏：前端技术文章标签： html css 前端

本文链接：https://blog.csdn.net/a772304419/article/details/141928853

版权

前端技术专栏收录该内容

445 篇文章 8 订阅

订阅专栏

背景图片：

.zxl-login-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("images/login-bj.jpg") fixed no-repeat;
	background-size: cover;
}

透明度：

.login-form {
  background-color: rgba(255, 255, 255, 0.8);
  /* background-color: #fff; */
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,.08), inset 0 0 3px #fff;
}

div中使用:

<div className='zxl-login-container'>
  <div className='login-form'>
    <div className='brand'>
      <img src={ brand } width={ 200 }/>
    </div>
    <form onSubmit={ handleSubmit(this.handleSubmit) }>
      <FormGroup validationState={ email.touched && email.error ? 'error' : null }>
        <FormControl disabled={ submitting } type='text' { ...email } placeholder='用户名/邮箱'/>
        { email.touched && email.error && <HelpBlock style={ { marginLeft: '5px' } }>{ email.error }</HelpBlock> }
      </FormGroup>
      <FormGroup validationState={ password.touched && password.error ? 'error' : null }>
        <FormControl disabled={ submitting } type='password' { ...password } placeholder='密码'/>
        { password.touched && password.error && <HelpBlock style={ { marginLeft: '5px' } }>{ password.error }</HelpBlock> }
      </FormGroup>
      { session.captchaRequired &&
        <FormGroup>
          <FormControl disabled={ submitting } type='text' { ...captcha } placeholder='验证码' style={ { width: '200px', display: 'inline-block' } }/>
          <img src={ this.state.captchaImgUrl } onClick={ this.refreshCaptcha } style={ { width: '100px', marginLeft: '20px' } }/>
        </FormGroup> }
      <Button bsStyle='success' disabled={ submitting } type='submit'>
        { submitting ? '登 录 中 ...' : '登 录' }
      </Button>
      <div style={ { textAlign: 'center', height: '40px' } }>
        { this.state.alertShow && !submitting && session.ecode !== 0 &&  
          <div style={ { marginTop: '10px', color: '#a94442' } }>
            { errMsgs[session.ecode] || '系统错误。' }
          </div> }
      </div>
      <div className='login-footer'>
        <span>若非该系统用户，请联系系统管理员创建。</span>
        <Link to='/forgot' style={ { marginLeft: '5px' } }>忘记密码</Link>
        {/*<span className='split'/>
        <Link to='/register'>用户注册</Link> */}
      </div>
    </form>
  </div>
</div>