Cách 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
Hãy tự mình thử »Cách thêm biểu mẫu vào hình ảnh
Bước 1) Thêm HTML:
Ví 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:
Ví 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;
}
Hãy tự mình thử »