Question

我目前正在尝试整个页面背景，但由于引导形式，它正在转移到底部。我希望图像能够将整个页面和引导程序表单保留在原位。另外，如何缩小窗体，使页面宽度缩小一半？

这是我的代码：

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

如果有人能帮助我，那意味着很多，因为我对网络开发很新手

由于

Answer 1

您应该在html中设置背景，而不是在body中设置背景。

<强> E.g。

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

<强> Fiddle

Answer 2

首先将照片设置为正文背景body{background:url("images/watchBackground.jpg") no-repeat center center fixed;} 然后是内联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>

Answer 3

@benj你的CSS很好。只是你的身体颜色被设置为白色（默认的自举 - 来自你的脚手架）并且白色在你的背景图像上重叠。您需要将其设置为透明。

body {
background-color: transparent;
}

表单容器宽度（缩小问题）...只需将整个面板包装到bootstrap网格列中......例如......

 <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
.........
......Your form code.......
...............
</div>
</div>

根据您的要求调整列宽和偏移值

如何在bootstrap表单后面获取页面背景图像

3 个答案: