Kuinka luoda: kuvan päällä oleva lomake

Opit, kuinka lisätä lomakkeen täysileveyskuvan päälle CSS:n avulla.

Kuinka lisätä lomakkeen kuvan päälle

Vaihe 1 - Lisää 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>Salasana</b></label>
    <input type="password" placeholder="Syötä salasana" name="psw" vaadittu>
    <button type="submit" class="btn">Kirjaudu sisään</button>
  </form>
</div>

Toinen vaihe - Lisää CSS:

kehon, html {
  korkeus: 100%;
}
* {
  box-sizing: border-box;
}
.bg-img {
  /* Käytettävä kuva */
  takapuoli-kuva: url("img_nature.jpg");
  /* Tässä kontrolloidaan kuvan korkeutta */
  minimi-korkeus: 380px;
  /* Tässä asetetaan kuva keskelle ja sopivasti skaalataan */
  takapuoli-sijainti: keskellä;
  takapuoli-toistuminen: ei-toistu;
  takapuoli-koko: cover;
  sijainti: suhteellinen;
}
/* Lisätään tyylejä lomakkeen konteinerille */
.container {
  sijainti: absoluuttinen;
  oikea: 0;
  marginaali: 20px;
  vihdoin-leveys: 300px;
  työkalupalkin: 16px;
  takapuoli-väri: valkoinen;
}
/* Täysleveät syötteet */
  input[type=text], input[type=password] {
  leveys: 100%;
  työkalupalkin: 15px;
  marginaali: 5px 0 22px 0;
  rajaus: ei mitään;
  takapuoli: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  takapuoli-väri: #ddd;
  korostus: ei mitään;
}
/* Määritellään tyylit lähettämisnapille */
.btn {
  takapuoli-väri: #04AA6D;
  väri: valkoinen;
  työkalupalkin: 16px 20px;
  rajaus: ei mitään;
  kursori: pointer;
  leveys: 100%;
  opacity: 0.9;
}
.btn:hover {
  opacity: 1;
}

Kokeile itse