Πώς να δημιουργήσουμε: Φόρμα στην εικόνα;

Μάθετε πώς να προσθέσετε φόρμα σε μια πλήρους πλάθου εικόνα χρησιμοποιώντας το CSS.

Πώς να προσθέσουμε φόρμα στο εικόνα;

Πρώτη Βήμα - Προσθήκη HTML:

<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>Κωδικός Πρόσβασης</b></label>
    <input type="password" placeholder="Εισάγετε Κωδικό Πρόσβασης" name="psw" required>
    <button type="submit" class="btn">Είσοδος</button>
  </form>
</div>

Βήμα 2 - Προσθήκη CSS:

σώμα, html {
  ύψος: 100%;
.btn:hover {
* {
  χαρακτήρας κουτίου: κουτί;
.btn:hover {
.bg-img {
  /* Χρησιμοποιούμενη εικόνα */
  υπόβαθρο εικόνας: url("img_nature.jpg");
  /* Ελέγχος ύψους εικόνας */
  ελάχιστη ύψος: 380px;
  /* Κεντρώση εικόνας και κατάλληλη κλίμακα */
  θέση υποβάθρου: κέντρο;
  ανάπαυση υποβάθρου: δεν επαναλαμβάνεται;
  尺码 υποβάθρου: καλυπτική;
  θέση: σχετική;
.btn:hover {
/* Προσθήκη στυλ για το κουτί φόρμας */
.container {
  θέση: αμετάβλητη;
  δικιαία: 0;
  μακρύτερος: 20px;
  μέγιστος πλάτος: 300px;
  χώρος: 16px;
  χρώμα υποβάθρου: λευκό;
.btn:hover {
/* Πλήρης πλάτος πεδίου εισαγωγής */
  input[type=text], input[type=password] {
  πλάτος: 100%;
  χώρος: 15px;
  μακρύτερος: 5px 0 22px 0;
  χαρακτήρας: δεν υπάρχει;
  υπόβαθρο: #f1f1f1;
.btn:hover {
input[type=text]:focus, input[type=password]:focus {
  χρώμα υποβάθρου: #ddd;
  σχεδίαση: δεν υπάρχει;
.btn:hover {
/* Ορισμός στυλ για το κουμπί υποβολής */
.btn {
  χρώμα υποβάθρου: #04AA6D;
  χρώμα: λευκό;
  χώρος: 16px 20px;
  χαρακτήρας: δεν υπάρχει;
  δείκτης: σφραγίδα;
  πλάτος: 100%;
  opacity: 0.9;
.btn:hover {
.btn:hover {
  opacity: 0.9;
.btn:hover {

opacity: 1;