Доброго времени суток разработчики! Я хотел бы спросить, как мне сделать так, чтобы моя форма отображалась поверх моего изображения? Проблема в том, что моя форма появляется внизу. Вот изображение моего скриншота.

Screenshot of my Problem

Вот мои коды:

HTML

<body>

    <div class="container" align="center">
      <div id="image">
        <img src="assets/img/imac.png" style="width:640px; height:678">
      </div>

    <div id="loginForm">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Please sign in</h3>
       </div>
         <div class="panel-body">
           <form accept-charset="UTF-8" role="form">
            <fieldset>
            <div class="form-group">
              <input class="form-control" placeholder="E-mail" name="email" type="text">
            </div>
            <div class="form-group">
             <input class="form-control" placeholder="Password" name="password" type="password" value="">
            </div>
            <div class="checkbox">
              <label>
                <input name="remember" type="checkbox" value="Remember Me"> Remember Me
              </label>
            </div>
          <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
          </fieldset>
          </form>
        </div>
      </div>
    </div>

   </div>

CSS

body {
background-color: #2ecc71;
}


.container {

width: 1000px;
height: 700px;
margin-top: 100px;
}

#loginForm{
width: 500px;
height: 400px;
}
3
user3604330 20 Дек 2014 в 17:10

4 ответа

Лучший ответ

Сделайте #image position:absolute и заполните им .container ( который сделан position:relative ).

body {
  background-color: #2ecc71;
}
.container {
  width: 1000px;
  height: 700px;
  margin-top: 100px;
  position:relative;
}
#loginForm {
  width: 500px;
  height: 400px;
  position:relative;
  z-index:10;
}

#image{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}
<div class="container" align="center">
  <div id="image">
    <img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
  </div>

  <div id="loginForm">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Please sign in</h3>
      </div>
      <div class="panel-body">
        <form accept-charset="UTF-8" role="form">
          <fieldset>
            <div class="form-group">
              <input class="form-control" placeholder="E-mail" name="email" type="text">
            </div>
            <div class="form-group">
              <input class="form-control" placeholder="Password" name="password" type="password" value="">
            </div>
            <div class="checkbox">
              <label>
                <input name="remember" type="checkbox" value="Remember Me">Remember Me
              </label>
            </div>
            <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
          </fieldset>
        </form>
      </div>
    </div>
  </div>

</div>
2
Gabriele Petrioli 20 Дек 2014 в 14:27

Создайте div размером с изображение и сделайте изображение фоновым изображением для этого div.

Затем поместите контейнер div внутри этого div для самой формы. Затем вы можете использовать CSS для позиционирования div формы с использованием полей.

<div id="image-container">
    <div id="form-container">
         // your form
    </div>
</div>

#image-container {
    width: 500px;
    height: 500px;
    background: url(/* your image */);
}
#form-container {
    width:350px;
    margin: 30px auto 0 auto;
 }

Очевидно, вам нужно заменить размеры на размеры вашего фактического изображения и значения полей, чтобы содержимое вашей формы соответствовало экрану компьютера на вашем изображении.

Это должно сработать, я кодирую это на своем телефоне, поэтому извиняюсь, если пропущу что-то тривиальное!

2
Lee 21 Дек 2014 в 02:43

Я использовал последний пример и сделал его проще. Просто настройте размер изображения и используйте отступы, чтобы расположить форму.

<div style="width:529px; height:220px; background-image:url('image.jpg')" align="center">
<div style="width:529px; padding: 165 0 0 0" align="center">
...form ...
<div>
<div>
1
Chris Mentzel 14 Май 2015 в 22:24

Попробуйте это

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.form-container {
  display: flex;
  justify-content: center;
  background: url("https://parrot-tutorial.com/images/mask-smog.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  min-height: 400px;
  padding: 24px;
}

.my-form {
  background-color: #fff;
  padding: 16px;
}

.form-header {
  text-align: center;
  padding: 0;
  margin-top: 0;
  font-size: 2em;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #f1f1f1;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.form-text {
  color: #6c757d;
  display: block;
  margin-top: .25rem;
  font-size: 80%;
  font-weight: 400;
}

.btn {
  display: block;
  width: 100%;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  background-color: #007bff;
}
<div class="form-container">
  <form action="/html/form-action.php" class="my-form" method="POST">
    <h2 class="form-header">Login</h2>

    <div class="form-group">
      <label for="exampleEmail">Email address</label>
      <input type="email" class="form-control" id="exampleEmail" placeholder="Enter email" name="uemail">
      <small class="form-text">We'll never share your email with anyone else.</small>
    </div>

    <div class="form-group">
      <label for="examplePassword">Password</label>
      <input type="password" class="form-control" id="examplePassword" placeholder="Password" name="pwd">
    </div>

    <div class="form-group">
      <input type="checkbox" id="exampleCheck" name="saveinfo">
      <label for="exampleCheck">Remember me</label>
    </div>

    <button type="submit" class="btn">Submit</button>
  </form>
</div>

Ссылка: Добавить форму на изображение

1
Vishal 28 Окт 2019 в 16:28