今天我們來學習一下如何制作一個透明度較高的HTML登錄頁面。
首先，我們需要在HTML文件中添加以下代碼。
<html>
<head>
<title>登錄界面</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.login {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
margin: 200px auto;
width: 300px;
text-align: center;
border-radius: 10px;
}
input[type="text"],
input[type="password"] {
padding: 8px;
margin: 10px;
border-radius: 5px;
border: none;
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login">
<h2>登錄</h2>
<form action="#" method="post">
<input type="text" name="username" placeholder="用戶名">
<br>
<input type="password" name="password" placeholder="密碼">
<br>
<input type="submit" value="登錄">
</form>
</div>
</body>
</html>其中，我們設置了背景圖片，并使用rgba()函數設置了一個透明度為0.5的白色背景。
我們還設置了一個class為login的div元素，它的樣式包括了圓角、寬度、居中以及內外邊距。在這個div中，我們可以放置登錄表單。
表單元素包括用戶名和密碼輸入框以及一個登錄按鈕。我們將它們的樣式設置為統一的邊距、圓角和背景顏色，這樣整個表單看起來就比較協調了。
嘗試將這段代碼復制到你的HTML文件中，保存并預覽，你會發現一個漂亮且透明的登錄界面顯示在你面前。
上一篇vue框架編譯軟件
下一篇jquery3.1下載