Question

背景图像仅出现在前两列中，而不出现在整个容器的背景中。我使用了以下代码：

<PackageReference Include="FluentNHibernate" Version="2.1.2" />
<PackageReference Include="NHibernate" Version="5.1.3" />

Answer 1

使用background-repeat: no-repeat; background-size: cover;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>
<div class="bg">
<div class="container-fluid bg">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <form class="form-container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>
</div>


</body>
</html>

Answer 2

删除background-repeat: no-repeat;并在正文和html上增加100％的高度。

html,
body {
  height: 100%;
}

.bg {
  background: url('https://picsum.photos/100/100');
  height: 100%;
  width: 100%;
}

.form-container {
  border: 1px solid;
}

<div class="container-fluid bg">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <form class="form-container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>

Answer 3

包含background-size: cover

.bg {
  background-image: url('https://via.placeholder.com/200x200');
  background-size: cover;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.form-container {
  border: 1px solid;
}

<div class="container-fluid bg">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <form class="form-container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>

为什么背景图像不能正确放入自举液体容器中？

3 个答案: