Làm thế nào để thực hiện - Biểu mẫu trên hình ảnh
Tìm hiểu cách thêm biểu mẫu vào hình ảnh có chiều rộng đầy đủ bằng CSS.
Biểu mẫu trên hình ảnh
Cách thêm biểu mẫu vào hình ảnh
Bước 1) Thêm HTML:
Thí dụ
<div class="bg-img">
<form action="/action_page.php"
class="container">
<h1>Login</h1>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
Bước 2) Thêm CSS:
Thí dụ
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-img {
/* The image used */
background-image: url("img_nature.jpg");
/* Control the height of the image */
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Add styles to the form container */
.container {
position: absolute;
right: 0;
margin: 20px;
max-width: 300px;
padding: 16px;
background-color: white;
}
/*
Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit button */
.btn {
background-color: #04AA6D;
color: white;
padding: 16px
20px;
border: none;
cursor: pointer;
width:
100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}