Question

我正试图在我的页面上获得3张背景图像。它们应该适合整个页面并且应该居中（因为图片很大，所以只显示中心）。

我正在使用3个Bootstrap col并尝试放入这些图片。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 picture-1">
    </div>
    <div class="col-xs-4 picture-2">
    </div>
    <div class="col-xs-4 picture-3">
    </div>
  </div>
</div>

CSS：

.picture-1 {
    background: url(images/home.jpg) no-repeat center center fixed;
}

我该怎么做？

Answer 1

使用此CSS

.picture-1 {
    background: url(images/home.jpg) no-repeat center center;
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
}

Answer 2

您应该通过将表规则应用于行和列来调整布局。

div[class^="picture"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.picture-1 {
  background-image: url("https://placehold.it/300x500/ff0000/00ffff?text=Col+1");
}
.picture-2 {
  background-image: url("https://placehold.it/300x500/00ff00/ff00ff?text=Col+2");
}
.picture-3 {
  background-image: url("https://placehold.it/300x500/0000ff/ffff00?text=Col+3");
}
html, body, .container-fluid {
  height: 100%;
}
.container-fluid {
  display: table;
  width: 100%;
  margin-top: -50px;
  padding: 50px 0 0 0;
  box-sizing: border-box;
}
.container-fluid .row {
  height: 100%;
  display: table-row;
}
.container-fluid .row .no-float {
  display: table-cell;
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="picture-1 col-xs-4 no-float"></div>
    <div class="picture-2 col-xs-4 no-float"></div>
    <div class="picture-3 col-xs-4 no-float"></div>
  </div>
</div>

HTML / CSS 3均匀宽度背景图像

2 个答案: