Question

我正在使用bootstrap，无法弄清楚如何获取文本和表单以覆盖我的背景图像。我已经尝试过这里找到的其他解决方案，但它们都不起作用。我已经尝试添加到引导页面以及创建自己的CSS并尝试在html页面中。

In function `Test::Test(double, std::string)':
 (.text._ZN4TestC2EdSs[_ZN4TestC5EdSs]+0x4a): undefined reference to `Test::nb'
 (.text._ZN4TestC2EdSs[_ZN4TestC5EdSs]+0x53): undefined reference to `Test::nb'
In function `Test::getNb()':
 (.text._ZN4Test5getNbEv[_ZN4Test5getNbEv]+0x6): undefined reference to `Test::nb'
error: ld returned 1 exit status

我的CSS

<form class="form-horizontal">
    <div class = "form-group">
        <label for="inputName" class="control-label col-xs-2">First Name</label>
        <div class = "col-xs-10">
            <input type = "text" class="form-control transparent-input" id="inputName" placeholder="Name">
        </div>
    </div>
    <br>
    <div class = "form-group">
        <label for="inputLast" class="control-label col-xs-2">Last Name</label>
        <div class = "col-xs-10">
            <input type = "text" class="form-control transparent-input" id="inputLast" placeholder="Name">
        </div>
    </div>
    <br>
    <div class="form-group">
        <label for="inputEmail" class="control-label col-xs-2">Email</label>
        <div class="col-xs-10">
            <input type="email" class="form-control transparent-input" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <br>
    <div class="form-group">
        <label for="inputPassword" class="control-label col-xs-2">Password</label>
        <div class="col-xs-10">
            <input type="password" class="form-control transparent-input" id="inputPassword" placeholder="Password">
        </div>
    </div>
    <br>
    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-5">
            <button type="submit" class="btn btn-primary">Register</button>
        </div>
    </div>
</form>

Answer 1

在表单周围放置一个容器，创建该容器100vh，然后就可以使用background-image声明。定位<section>或<div>比html更为可靠。

我为你编写了所有关于Codepen的信息：http://codepen.io/staypuftman/pen/jWjgaO

Answer 2

尝试更改您的html标记，如下所示（为body元素指定id标记）

<body id="register-bg">
   <form class="form-horizontal">
      .....
      .....
  </form>
</body>

你的CSS就像

    html {
        /* Ensure the html element always takes up the full height of the browser window */
        min-height: 100%;
    }
    body {
        /* Workaround for some mobile browsers */
        min-height: 100%;
    }
        body#register-bg {
            /* This image will be displayed fullscreen */
            /* The Magic */
            background: rgba(245, 245, 245, 0.7) url('bowling.jpg') no-repeat center center;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }
    .transparent-input {
        background-color: rgba(0, 0, 0, 0);
        border: none;
    }

在背景图象的透明形式bootstrap

2 个答案: