今天我們來(lái)學(xué)習(xí)一下如何制作一個(gè)透明度較高的HTML登錄頁(yè)面。
首先，我們需要在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>其中，我們?cè)O(shè)置了背景圖片，并使用rgba()函數(shù)設(shè)置了一個(gè)透明度為0.5的白色背景。
我們還設(shè)置了一個(gè)class為login的div元素，它的樣式包括了圓角、寬度、居中以及內(nèi)外邊距。在這個(gè)div中，我們可以放置登錄表單。
表單元素包括用戶名和密碼輸入框以及一個(gè)登錄按鈕。我們將它們的樣式設(shè)置為統(tǒng)一的邊距、圓角和背景顏色，這樣整個(gè)表單看起來(lái)就比較協(xié)調(diào)了。
嘗試將這段代碼復(fù)制到你的HTML文件中，保存并預(yù)覽，你會(huì)發(fā)現(xiàn)一個(gè)漂亮且透明的登錄界面顯示在你面前。
上一篇vue框架編譯軟件
下一篇jquery3.1下載