CSS 使用HTML和CSS设计一个透明的登录/注册网页

在HTML中，登录表单用于收集用户信息，并有一个按钮用于将详细信息发送到服务器端进行操作。登录表单包含基本信息，如姓名、出生日期、电子邮件、手机号码、性别、地址等。如今，几乎在互联网上的每个网站上都使用HTML表单来收集用户信息。

在本文中，我们将使用HTML和CSS在网页上设计一个透明的登录表单。

设计一个透明的登录/注册网页

以下是具体步骤−

创建一个带有类名“login-container”的<div>元素。
在其中，创建另外两个带有类名“textbox”的<div>元素，用于用户名和密码字段。
然后，为登录按钮添加一个带有类名“btn”的<input>元素。
然后，为了使登录表单透明，我们使用CSS样式将“.textbox”输入类的背景属性设置为无。

示例

在下面的示例中，我们使用上述方法在一个网页上设计了一个透明的登录表单，使用HTML和CSS−

<!DOCTYPE html>
<html>
<head>
   <title>Transparent Login Form</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-12N37f5QGtxзVEgiss14W3ExzMWZxybE1SJSESQP9S+oqd12jhcu+A56EbclzFSJ" crossorigin="anonymous">
   <style>
      body {
         margin: 0;
         padding: 0;
         font-family: sans-serif;
         background-color: lightslategray;
         background-size: cover;
      }
      .login-container{
         width: 280px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         color: white;
      }
      .login-box h1{
         border-bottom: 6px solid whitesmoke;
      }
      .textbox{
         width: 100%;
         overflow: hidden;
         font-size: 20px;
         padding: 8px 0;
         margin: 8px 0;
         border-bottom: 1px solid whitesmoke;
      }
      .textbox i {
         width: 26px;
         float: left;
         text-align: center;
      }
      .textbox input{
         border: none;
         outline: none;
         background: none;
         color: white;
         font-size: 18px;
         width: 80%;
         float: left;
         margin: 0 10px;
      }
      .btn{
         width: 100%;
         background: none;
         border: 2px solid whitesmoke;
         color: white;
         padding: 5px;
         font-size: 18px;
         cursor: pointer;
         margin: 12px 0;
      }
      h1{
         text-align: center;
         font-size:x-large;
         padding-bottom: 50px;
         color: purple;
      }
   </style>
</head>
<body>
   <div class="login-container">
      <h1>Tutorialspoint - Login</h1>
      <div class="textbox">
         <i class="fas fa-user"></i>
         <input type="text" placeholder="Username">
      </div>
      <div class="textbox">
         <i class="fas fa-lock"></i>
         <input type="password" placeholder="password">
      </div>
      <input type="button" class="btn" value="Login">
   </div>
</body>
</html>