كيفية إنشاء: نموذج على الصورة

تعلم كيفية إضافة نموذج إلى صورة عريضة باستخدام 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%;
  الشفافية: 0.9;
}
.btn:hover {
  الشفافية: 1;
}

تجربة بنفسك