我正在使用引导程序,但无法弄清楚如何让文本和表单覆盖我的背景图像。我尝试了在这里找到的其他解决方案,但没有一个有效。我尝试添加到引导页面以及创建自己的 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;
}