در این مقاله می آموزید که چطور با استفاده از CSS و Html Html به یک تصویر کامل ، فرم اضافه کنید.

قدم اول : کد HTML را اضافه کنید.
مثال :

فرم روی یک تصویر کامل

  

    
ورود به سیستم

    ایمیل
    
    رمز عبور
    
    وارد شدن
  

این مثال یک فرم را روی یک تصویر ریسپانسیو ایجاد می کند. سعی کنید اندازه پنجره مرورگر را تغییر دهید تا ببینید چگونه همیشه کل صفحه را پوشش می دهد و در تمام اندازه های صفحه نمایش مقیاس خوبی دارد




                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* The image used */
  background-image: url("http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg");

  /* Control the height of the image */
  min-height: 380px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Add styles to the form container */
.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit button */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}

                

<h2>فرم روی یک تصویر کامل</h2>

<div class="bg-img">

  <form action="/action_page.php" class="container">

    <h1>ورود به سیستم

</h1>

    <label for="email"><b>ایمیل</b></label>

    <input type="text" placeholder="ایمیل وارد کنید" name="email" required>

    <label for="psw"><b>رمز عبور</b></label>

    <input type="password" placeholder="رمز عبور را وارد کنید" name="psw" required>

    <button type="submit" class="btn">وارد شدن</button>

  </form>

</div>

<p>این مثال یک فرم را روی یک تصویر ریسپانسیو ایجاد می کند. سعی کنید اندازه پنجره مرورگر را تغییر دهید تا ببینید چگونه همیشه کل صفحه را پوشش می دهد و در تمام اندازه های صفحه نمایش مقیاس خوبی دارد</p>

 

خروجی افکت Form on Image