@keyframes register {
			20%{
				top:50%;
				opacity: .2;
			}
			30%{
				top:50%;
				opacity: .3;
			}
			40%{
				top:50%;
				opacity: .4;
			}
			50%{
				top:50%;
				opacity: .5;
			}
			60%{
				top:50%;
				opacity: .6;
			}
			70%{
				top:50%;
				opacity: .7;
			}
			80%{
				top:50%;
				opacity: .8;
			}
			90%{
				top:50%;
				opacity: .9;
			}
			100%{
				top:50%;
				opacity: 1.0;
			}
		}
		/* 创建独立的背景层 
		.background-layer {
    			position: fixed;
    			top: 0;
   		 	left: 0;
    			width: 100vw;
    			height: 100vh;
			background-image: url(../img/background.jpg);
			background-size: cover;
			background-position: center;
			font-family: Arial, sans-serif;
    			z-index: -1;  
		}*/
        /* 背景容器 */
        .background-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            overflow: hidden;
        }
        
        /* 背景图片层 - 关键：必须有这些属性 */
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 背景设置 */
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            
            /* 转场动画 - 关键属性 */
            opacity: 0;
            transition: opacity 0.8s ease; /* 这个会被JS覆盖，但作为后备 */
        }
        
        /* 激活状态 - 关键：显示图片 */
        .bg-image.active {
            opacity: 1;
        }
                
        
		body {
			font-family: Arial, sans-serif;
		}
		.container {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top:190px;
		}
		.form-container {
			width: 400px;
			background-color: rgba(255, 255, 255, 0.6);
			border-radius: 15px;
			padding: 20px;
			animation: register 0.7s;
		}
		.Img {
			width: 80px;
			height: 80px;
			border-radius: 40px;
			margin: 30px auto 0px 0px;
		}
		h1 {
			color: #2AB584;
			font-family: "华文新魏", Arial, sans-serif;
			font-size: 50px;
			text-align: center;
			margin: 0px auto 30px;
		}
		form {
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
		}

		input[type="password"] {
			margin-bottom: 20px;
			padding: 10px;
			border-radius: 5px;
			border: none;
			background-color: rgba(255, 255, 255, 0.3);
			font-size: 16px;
			color: #333;
			outline: none;
			transition: all 0.3s;
  			font-family: Arial, sans-serif;
  			box-sizing: border-box;
		}

		input[type="password"]:focus {
			background-color: rgba(255, 255, 255, 0);
		}
		input[type="submit"] {
			background-color: #2AB584;
			color: #FFF;
			border: none;
			border-radius: 5px;
			padding: 10px;
			font-size: 16px;
			cursor: pointer;
			transition: all 0.3s;
		}
		input[type="submit"]:hover {
			background-color: #238268;
		}
		button[type="submit"] {
			background-color: #2AB584;
			color: #FFF;
			border: none;
			border-radius: 5px;
			padding: 10px;
			font-size: 16px;
			cursor: pointer;
			transition: all 0.3s;
			margin-bottom: 40px;
		}
		button[type="submit"]:hover {
			background-color: #238268;
		}
		.error-message {
			color: #f00;
			font-size: 14px;
			font-family: Arial, sans-serif;
			margin-top: -30px;
			margin-bottom: -20px;
			text-align: center;
		}
  		input:required {
    			border: 1px solid rgb(204,204,204);
  		}
  		<!-input:required:invalid {
   			border: 2px solid red;
  		}-->
  		input:required:valid {
    			border: 1px solid green;
  		}