javascript - 为什么 Html 表单不显示在图像上

Question

我在图片下方设计了一个表格。现在，我想在表单的背景中显示完整的响应图像。

我尝试编写代码，但图像显示在表单内部，而不是在全宽和全高图像上显示表单。

我的错误在哪里？

HTML

<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">

<form role="form" action="" method="post" class="f1" >

        <h3>Fill in the form to get Flight</h3>
        <div class="f1-steps">
                <div class="f1-progress">
                    <div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
                </div>
                <div class="f1-step active">
                        <div class="f1-step-icon"><i class="fa fa-user"></i></div>
                        <p>plan</p>
                </div>
                <div class="f1-step">
                        <div class="f1-step-icon"><i class="fa fa-key"></i></div>
                        <p>schedule</p>
                </div>
            <div class="f1-step">
                        <div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
                        <p>people</p>

        </div>

            <div class="f1-step">
                        <div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
                        <p>about</p>

        </div>
    </div>

        <fieldset>
            <h4>I want to go:</h4>
                <div class="form-group">
                    <label class="sr-only" for="f1-first-name">From</label>
        <input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
    </div>
    <div class="form-group">
        <label class="sr-only" for="f1-last-name">To</label>
        <input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
    </div>

    <div class="f1-buttons">
        <button type="button" class="btn btn-next">Next</button>
    </div>
</fieldset>


</form>
</div>

</div>

CSS

.formhold {

  background: url(images/334.jpg);
  background-size: cover;
}

form {
  display: block;
  margin: 0 auto;
}

Answer 1

您的想法几乎是正确的。

我草拟了一个非常快速的代码笔模型，您可以看一下:

http://codepen.io/zsawaf/pen/vKRLAP

总而言之，您的错误是您需要在引导列之外的另一个容器，该容器跨越整个页面并包含背景图像。

HTML:

<div class="container-fluid cover-img">
      <div class="row">
        <!-- whatever you want your form container to span -->
        <div class="col-xs-offset-3 col-xs-6">
          <div class="form-container">
            <form>
              <input type="text"/>
              <input type="text"/>
              <input type="text"/>
              <input type="text"/>
              <input type="text"/>
            </form>
          </div>
        </div>
       </div>
    </div>

SCSS:

.cover-img {
  background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.form-container {
  margin-top: 40px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  form {
    margin: 20px 0;
    input {
      margin: 5px 0;
      width: 100%;
      height: 40px;
    }
  }
}