Come creare: modulo sull'immagine

Impara come aggiungere un modulo a un'immagine a larghezza piena utilizzando CSS.

Come aggiungere un modulo a un'immagine

Passo 1 - Aggiungi HTML:

<div class="bg-img">
  <form action="/azione_pagina.php" class="container">
    <h1>Accesso</h1>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Inserisci Email" name="email" required>
    <etichetta per="psw"><b>Password</b></etichetta>
    <input type="password" placeholder="Inserisci Password" name="psw" richiesto>
    <button type="submit" class="btn">Accedi</button>
  </form>
</div>

Secondo passaggio - Aggiungi CSS:

corpo, html {
  altezza: 100%;
}
* {
  box-sizing: border-box;
}
.bg-img {
  /* Immagine utilizzata */
  immagine di sfondo: url("img_nature.jpg");
  /* Controllo dell'altezza dell'immagine */
  altezza minima: 380px;
  /* Allineamento dell'immagine al centro e ridimensionamento appropriato */
  posizione sfondo: centro;
  ripetizione sfondo: senza ripetizione;
  dimensione sfondo: copertura;
  posizione: relativo;
}
/* Stile per il contenitore del modulo */
.container {
  posizione: assoluto;
  destra: 0;
  margine: 20px;
  larghezza massima: 300px;
  riempimento: 16px;
  colore di sfondo: bianco;
}
/* Campo di input a larghezza completa */
  input[type=text], input[type=password] {
  larghezza: 100%;
  riempimento: 15px;
  margine: 5px 0 22px 0;
  bordo: none;
  sfondo: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  colore di sfondo: #ddd;
  contorno: none;
}
/* Stile per il pulsante di invio */
.btn {
  colore di sfondo: #04AA6D;
  colore: bianco;
  riempimento: 16px 20px;
  bordo: none;
  cursore: puntatore;
  larghezza: 100%;
  opacity: 0.9;
}
.btn:hover {
  opacity: 1;
}

Prova personalmente