透明登录界面的简单实现

梦里梦外; 2021-10-29 10:28 406阅读 0赞

1.直接上效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIxMzM2_size_16_color_FFFFFF_t_70]  
不同浏览器兼容不同，效果有差异。  
2.源码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>透明登录界面</title>
    		<style type="text/css">
    			body {
    				width: 800px;
    				height: 520px;
    			    background-image: url("img/back.jpg");;
    			    background-repeat: no-repeat;
    			}
    			 
    			#login_frame {
    			    width: 400px;
    			    height: 260px;
    			    padding: 13px;
    			    position: absolute;
    			    left: 40%;
    				right: 50%;
    			    top: 60%;
    				margin-bottom: 50%;
    			    margin-left: -100px;
    			    margin-top: -200px;
    			 
    			    background-color: rgba(240, 255, 255, 0.25);
    			 
    			    border-radius: 10px;
    			    text-align: center;
    			}
    			 
    			
    			 
    			 
    			
    			 
    			.text_class {
    			    width: 280px;
    			    height: 26px;
    				border-top-left-radius: 5px;
    			    border-top-right-radius: 5px;
    			    border-bottom-right-radius: 5px;
    			    border: 0;
    			}
    			 
    			#btn_login {
    			    font-size: 14px;
    			    font-family: 宋体;
    			 
    			    width: 120px;
    			    height: 28px;
    			    line-height: 28px;
    			    text-align: center;
    			 
    			    color: white;
    			    background-color: #3BD9FF;
    			    border-radius: 6px;
    			    border: 0;
    				
    			    float: 160px;
    			}
    			#btn_regis {
    			    font-size: 14px;
    			    font-family: 宋体;
    			    width: 120px;
    			    height: 28px;
    			    line-height: 28px;
    			    text-align: center;
    			    color: white;
    			    background-color: #3BD9FF;
    			    border-radius: 6px;
    			    border: 0;
    				
    			    float: 160px;
    		
    			 
    			 
    			#forget_pwd:hover {
    			    color: blue;
    			    text-decoration: underline;
    			}
    			 
    			#login_control {
    			    padding: 0 28px;
    			
    			}
    		</style>
    	</head>
    	<body>
    		<div id ="login_frame">
    			<from method ="post" action="login.js">
    				<div>
    					<p>账号  <input type="text" id="username" placeholder="请输入用户名" class="text_class"></lable></p>
    				</div>
    				
    				<div
    					<p>密码  <input type="text" id="password" placeholder="请输入密码" class="text_class"></lable></p>
    				</div>
    				
    				
    				<div id="login_control">
    					<input type="button" id="btn_login" value="登录" οnclick="login();"/>
    
    					<input type="button" id="btn_regis" value="注册" οnclick="login();"/>
    				</div>	
            </div>
    
    
    			</from>
    		</div>
    	</body>
    </html>

希望对你有帮助！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIxMzM2_size_16_color_FFFFFF_t_70]: /images/20211029/cad9486941eb4656a0ff8db5248600a8.png