چگونه ایجاد کنیم: فرم روی تصویر

آموزش اینکه چگونه با استفاده از 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>

مرحله دوم - اضافه کردن CSS:

بدن, html {
  ارتفاع: 100%;
}
* {
  حجم‌بندی: جعبه;
}
.bg-img {
  /* تصویری که استفاده می‌شود */
  تصویر پس‌زمینه: url("img_nature.jpg");
  /* ارتفاع تصویر را کنترل می‌کند */
  حداقل ارتفاع: 380px;
  /* تصویر را در وسط قرار داده و به طور مناسب بزرگ‌تر می‌کند */
  موقعیت پس‌زمینه: وسط;
  تکرار پس‌زمینه: بدون تکرار;
  اندازه پس‌زمینه: پوشش کامل;
  موقعیت: نسبی;
}
/* برای اضافه کردن استایل به مخزن فرم */
.container {
  موقعیت: تعادلی;
  سمت راست: 0;
  محدوده: 20px;
  حداکثر عرض: 300px;
  پادگيري: 16px;
  رنگ پس‌زمینه: سفيد;
}
/* فیلدهای ورودی کاملاً پهناور */
  input[type=text], input[type=password] {
  عرض: 100%;
  پادگيري: 15px;
  محدوده: 5px 0 22px 0;
  حاشيه: هيچ;
  پس‌زمینه: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  رنگ پس‌زمینه: #ddd;
  حاشيه: هيچ;
}
/* برای تنظیم استایل دکمه ارسال تنظیمات */
.btn {
  رنگ پس‌زمینه: #04AA6D;
  رنگ: سفيد;
  پادگيري: 16px 20px;
  حاشيه: هيچ;
  نويسندگي: انگشت;
  عرض: 100%;
  opacity: 0.9;
}
.btn:hover {
  opacity: 1;
}

با دست خود امتحان کنید