数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用HTML和CSS在图像上添加登录表单？
许多网站上都可以看到在图像上显示登录表单。例如，组织特殊活动的机构可能在其网站上使用活动图片并嵌入登录表单；餐厅也可能在其网站上使用餐厅图片。
在这种情况下，我们使用图像来创建登录或注册界面。与标准的登录或注册表单相比，这种布局使网站更具吸引力。要在图片上创建登录表单，我们只需要HTML和CSS。在深入了解本文之前，让我们快速回顾一下HTML 的<img>标签和登录表单。
在图像上创建登录表单的方法
这种方法我们将创建一个表单，并将该表单放置在图像上。然后，我们将装饰表单并根据我们的要求调整对齐方式。要在图像上创建表单，请按照以下步骤操作。
- 步骤1：正如我们所说的，我们将创建一个HTML表单，并将该表单放置在图像上。
- 步骤2：创建表单后，我们将使用内联CSS来设计我们的表单。
创建HTML表单结构
要在图像上创建表单，我们需要一个带有背景图像的容器。要了解如何创建HTML表单，您可以查看我们的HTML表单文章。
<!DOCTYPE html>
<html>
<body>
<div class="backgroundimage">
<form>
<div class="profilePic">
<img src=
"https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
alt="Avatar"
class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text"
placeholder="Enter Username"
name="uname"
required />
<label for="pass"><b>Password</b></label>
<input type="password"
placeholder="Enter Password"
name="pass"
required />
<button type="submit">Login</button>
<label>
<input type="checkbox"
checked="checked"
name="remember" /> Remember me
</label>
</div>
<div class="formFields" >
<button type="button" class="cancelbtn">Cancel</button>
<span class="pass">Forgot <a href>Password?</a></span>
</div>
</form>
</div>
</body>
</html>
样式化HTML表单
在这里，我们为表单元素设置样式，并添加图像。
- 为了将图像添加到父div，我们使用了CSS 的background-image属性，并使用background-cover属性来正确设置图像。
- 我们使用了其他CSS属性来根据我们的需要设置表单元素的样式，您也可以创建自己的设计，但尽量使表单始终保持响应式。
<style>
.backgroundimage {
background-image: url(
"https://tutorialspoint.com/assets/questions/media/1039321-1719921284.jpg");
height: 520px;
background-size: cover;
}
form {
width: 35%;
padding: 2%;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
}
label {
font-size: 18px;
color: white;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 16px;
background-color: #4caf50;
color: white;
padding: 8px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 8px 12px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.formFields {
padding: 12px;
color: white;
}
span.pass {
float: right;
padding-top: 16px;
text-decoration: none;
}
</style>
完整的示例代码
在下面的示例中，我们将上述步骤的伪代码组合成完整的代码，以在图像上创建表单。
<!DOCTYPE html>
<html>
<head>
<style>
.backgroundimage {
background-image: url(
"https://tutorialspoint.com/assets/questions/media/1039321-1719921284.jpg");
height: 520px;
background-size: cover;
}
form {
width: 35%;
padding: 2%;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
}
label {
font-size: 18px;
color: white;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 16px;
background-color: #4caf50;
color: white;
padding: 8px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 8px 12px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.formFields {
padding: 12px;
color: white;
}
span.pass {
padding-top: 16px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="backgroundimage">
<form>
<div class="profilePic">
<img src=
"https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
alt="Avatar"
class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text"
placeholder="Enter Username"
name="uname"
required />
<label for="pass"><b>Password</b></label>
<input type="password"
placeholder="Enter Password"
name="pass"
required />
<button type="submit">Login</button>
<label>
<input type="checkbox"
checked="checked"
name="remember" /> Remember me
</label>
</div>
<div class="formFields" >
<button type="button" class="cancelbtn">Cancel</button>
<p>
<span class="pass">Forgot <a href>Password?</a></span>
</p>
</div>
</form>
</div>
</body>
</html>
运行上述代码后，它将生成一个输出，其中包含登录表单以及用作登录表单背景的图像，这些都显示在网页上。
更新于：2024年7月2日
浏览量：1000+
广告