body { margin: 0; padding: 0; font-family: sans-serif; background: url(../images/背景.jpg) no-repeat; /* background-color: transparent; */ } .login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; padding: 40px; /* background: rgba(26, 61, 34, 0.6); */ background: rgba(54, 53, 53, 0.6); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0, 0, 0, .5); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; text-align: center; color: #fff; } .login-box .login-field { position: relative; } .login-box .login-field input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .login-field label { position: absolute; top: 0; left: 0; letter-spacing: 1px; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .login-field input:focus~label, .login-box .login-field input:valid~label { top: -23px; left: 0; font-size: 12px; } .login-box button { background: transparent; border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 146px; cursor: pointer; border-radius: 5px; } .login-box .return { background: transparent; border: none; outline: none; color: #fff; font-size: 5px; padding: 14px 148px; cursor: pointer; border-radius: 5px; } .login-box .return-zc, .login-box .return-wjmm { background: transparent; border: none; outline: none; color: #fff; font-size: 5px; padding: 14px 20px; cursor: pointer; border-radius: 5px; } .login-box .return-zc { float: left; } .login-box .return-wjmm { float: right; }