背景图像上的透明表单引导

Transparent form bootstrap over background image

本文关键字：表单 透明 图像 背景      更新时间：2023-09-26

我正在使用引导程序，但无法弄清楚如何让文本和表单覆盖我的背景图像。我尝试了在这里找到的其他解决方案，但没有一个有效。我尝试添加到引导页面以及创建自己的 CSS 并在 html 页面中尝试。

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

我的 CSS

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

窗体周围放置一个容器，使该容器100vh，您可以在其上使用background-image声明。定位<section>或<div>比html更可靠。

我把这一切都连接到Codepen上为你：http://codepen.io/staypuftman/pen/jWjgaO

尝试像下面这样更改 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;
    }
相关文章：