如何使用 HTML 和 CSS 将登录表单添加到图片中？

2025年3月17日 | 阅读 3 分钟

在本教程中，我们将学习如何使用 HTML 和 CSS 将表单添加到图片中。

How to Add a Login Form to an Image using HTML and CSS

许多网站都会在图片上使用登录表单。例如，一家餐厅网站，展示餐厅的照片；或者一个组织举办特别活动，并配有活动图片和一个登录表单。在这种情况下，我们可以使用图片来创建一个登录或注册表单。这种布局比标准的登录或注册表单更能吸引人。我们只需要 HTML 和 CSS 就可以在图片上创建一个登录表单。下面的示例将演示这种方法的思路。

创建结构

在本节中，我们将构建一个简单的网站结构，以便在照片上开发一个登录表单。

HTML 代码用于创建登录表单的布局。

HTML 代码

<!DOCTYPE html>
<html>

<head>
	<meta name="viewport"
		content="width=device-width, initial-scale=1">
</head>

<body>
	<div class="background-img">
		<h1>javaTpoint</h1>

		<form class="container">
			<b>Username</b>
			<input type="text" placeholder="Put your Username"
					name="username" required>

			<b>Password</b>
			<input type="password" placeholder="Enter your Password"
					name="password" required>

			<button type="submit" class="button">Login</button>
		</form>
	</div>
</body>

</html>

结构设计

在上一步中，我们构建了基本网站的设计。在本节中，我们将开发登录表单的模板。

CSS 代码

	<style>

* {
	box-sizing: border-box;
}
body {
		font-family: Arial, sans-serif;
		height: 100%;
}

h1 {
	text-align:center;
	-webkit-text-stroke: 1px black;
	color:red;
}

.background-img {
	min-height: 400px;
	background-size: cover;
	background-image: url(
"https://miro.medium.com/max/1200/1*xMuIOwjliGUPjkzukeWKfw.jpeg");
}
.container {
	max-width: 300px;
	padding: 17px;
	position: absolute;
	left: 28px;
	top: 50px;
	margin: 20px;
}

b {
	-webkit-text-stroke: 1px black;
	color: red;
	font-size:26px;
}
input[type=text],
input[type=password] {
	margin: 17px 0px;
	border: 2px solid red;
	width: 100%;
	padding: 17px;
}
.button:hover {
	transform: scale(1.2);
	transition: transform 0.2s;
}

.button {
	border: none;
	cursor: pointer;
	width: 100%;
	background-color: #F58840;
	color: #EAF6F6;
	padding: 17px 17px;
}
	</style>

合并 HTML 和 CSS 代码后

这是最终的代码。正如我们从图片中看到的，左对齐的登录表单比标准的登录表单更具吸引力。

HTML 代码

<!DOCTYPE html>
<html>

<head>
	<meta name="viewport"
		content="width=device-width, initial-scale=1">
	<style>

* {
	box-sizing: border-box;
}
body {
		font-family: Arial, sans-serif;
		height: 100%;
}

h1 {
	text-align:center;
	-webkit-text-stroke: 1px black;
	color:red;
}

.background-img {
	min-height: 400px;
	background-size: cover;
	background-image: url(
"https://miro.medium.com/max/1200/1*xMuIOwjliGUPjkzukeWKfw.jpeg");
}
.container {
	max-width: 300px;
	padding: 17px;
	position: absolute;
	left: 28px;
	top: 50px;
	margin: 20px;
}

b {
	-webkit-text-stroke: 1px black;
	color: red;
	font-size:26px;
}
input[type=text],
input[type=password] {
	margin: 17px 0px;
	border: 2px solid red;
	width: 100%;
	padding: 17px;
}
.button:hover {
	transform: scale(1.2);
	transition: transform 0.2s;
}

.button {
	border: none;
	cursor: pointer;
	width: 100%;
	background-color: #F58840;
	color: #EAF6F6;
	padding: 17px 17px;
}
	</style>
</head>

<body>
	<div class="background-img">
		<h1>javaTpoint</h1>

		<form class="container">
			<b>Username</b>
			<input type="text" placeholder="Put your Username"
					name="username" required>

			<b>Password</b>
			<input type="password" placeholder="Enter your Password"
					name="password" required>

			<button type="submit" class="button">Login</button>
		</form>
	</div>
</body>


</html>

输出

下一主题如何使用 CSS 设置段落元素的边距

如何使用 HTML 和 CSS 将登录表单添加到图片中？

创建结构

合并 HTML 和 CSS 代码后

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何使用 HTML 和 CSS 将登录表单添加到图片中？

创建结构

合并 HTML 和 CSS 代码后

相关帖子

HTML 列表框

HTML 隐藏元素

Web 3 将如何改变我们的生活

如何使用 CSS 创建平滑弹跳动画

如何在 HTML 中添加网站图标

HTML 中的块级元素

HTML 中的 hgroup 标签

HTML 斜体

HTML 颜色样式

HTML 颜色选择器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器