Как создать: форма на изображении

Узнайте, как использовать CSS для добавления формы на полноразмерное изображение.

Как добавить форму к изображению

Шаг 1 - Добавить 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>

第二步 - Добавить CSS:

тело, html {
  высота: 100%;
}
* {
  размер коробки: коробка;
}
.bg-img {
  /* Используемое изображение */
  изображение фона: url("img_nature.jpg");
  /* Управление высотой изображения */
  минимальная высота: 380px;
  /* Разместить изображение по центру и适当地 масштабировать */
  позиция фона: центр;
  повторение фона: не повторять;
  размер фона: cover;
  позиция: относительная;
}
/* Добавить стиль для контейнера формы */
.container {
  позиция: абсолютная;
  справа: 0;
  отступ: 20px;
  максимальная ширина: 300px;
  отступ: 16px;
  цвет фона: белый;
}
/* Полное ширины поле ввода */
  input[type=text], input[type=password] {
  ширина: 100%;
  отступ: 15px;
  отступ: 5px 0 22px 0;
  границы: none;
  фondo: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  цвет фона: #ddd;
  контур: none;
}
/* Установить стиль для кнопки отправки */
.btn {
  цвет фона: #04AA6D;
  цвет: белый;
  отступ: 16px 20px;
  границы: none;
  курсор: указатель;
  ширина: 100%;
  opacity: 0.9;
}
.btn:hover {
  opacity: 1;
}

Попробуйте сами