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;
    }
  }
}

Answer 2

所以我不确定这对你有用，但最后一个例子是。使用wrapper类在表单周围添加container-fluid div并将背景应用于：

.wrapper {
     background: url(images/334.jpg) no-repeat;
     background-position: top center;
     background-size: 100% auto;
}

HTML：

<div class="wrapper container-fluid">
<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>

Here是最新jsFiddle的链接。

Answer 3

像Sinan所说，你需要给表单一个宽度和高度来匹配图像大小。

我认为您可以使用Sinan的代码并将其与此相结合，以扩展表单的宽度和高度以匹配图像大小。

让我们说你的图像尺寸是1024x768，然后是：

pom.xml

Answer 4

你可以这样做：

.formhold {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: inherit;
  background-image: url(images/334.jpg)
  background-color: rgba(0, 0, 0, 0);
  background-size: inherit;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 9999;
}

为什么Html表单没有显示在图像上

4 个答案: