Css 如何在引导窗体后面获取页面背景图像
我目前正试图把整个页面的背景，但它被转移到底部，因为引导形式。我希望图像占据整个页面，引导表单保持原样。另外，我如何稍微缩小表单，使其占用半页的宽度 这是我的代码：Css 如何在引导窗体后面获取页面背景图像,css,html,twitter-bootstrap,Css,Html,Twitter Bootstrap,我目前正试图把整个页面的背景，但它被转移到底部，因为引导形式。我希望图像占据整个页面，引导表单保持原样。另外，我如何稍微缩小表单，使其占用半页的宽度 这是我的代码： <!DOCTYPE html> <head> <title>Contact Us</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="ht
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
html{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div">
<div class="panel panel-default">
<form id="iForm">
<div class="row">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
联系我们
html{
背景：url（'images/watchBackground.jpg'）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
联系我们网页
名字
试验
姓
电子邮件地址
提交
谢谢而不是在
html正文中设置背景
例如
body{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
首先将图片设置为body backgroundbody{background:url（“images/watchBackground.jpg”）无重复中心固定；}
然后通过内联css样式设置所需的透明元素：style=“background color:transparent；”
您的更正代码如下：
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
body{
background:url('k.jpg') no-repeat center center fixed;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div" style="background-color:transparent;">
<div class="panel panel-default" style="background-color:transparent;">
<form id="iForm" style="background-color:transparent;">
<div class="row" style="background-color:transparent;">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
联系我们
身体{
背景：url（'k.jpg'）没有固定的重复中心；
}
联系我们网页
名字
试验
姓
电子邮件地址
提交
@benj你的css很好。只是你的身体颜色被设置为白色（引导默认-在你的例子中来自脚手架），而白色与背景图像重叠。您需要将其设置为透明
body {
background-color: transparent;
}
对于表单容器宽度（收缩问题）…只需将整个面板包装到引导网格列中..例如
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
.........
......Your form code.......
...............
</div>
</div>
.........
……您的表格代码。。。。。。。
...............
根据您的要求调整列宽和偏移值多谢大伙，它可以工作-我只是想知道，是否可以使引导表单稍微透明，甚至使其宽度更小？@BenjMikesozery是的，目前在您的示例中，负责表单背景颜色的是它的容器.panel
。我建议您为它添加另一个类，这样您就可以更改它的颜色和宽度，而不会影响具有相同类的其他元素-在本例中，让我们使用formContainer
。然后你在你的css.formContainer{background:rgba（255255255，0.8）；width:400px}
中这样做，你能给我举个例子吗，也许用小提琴？顺便说一句，我已经接受了你的回答，因为你帮助了我，这是非常迅速的