Question

我希望能够在背景上堆叠图像并让它们对背景图像做出响应，所以我认为容器流体是最好的方法。但是，在背景下，左右两侧有一个白色的间隙：我该如何摆脱它？

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>


    <div class="collapse navbar-collapse header" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Resume </a> </li>
      </ul>
    </div>
  </div>
</nav>


<div class="container-fluid">

    <img class="img-responsive" src="images/background.jpg">

</div>



</body>

样式：

body {
    margin:none;
    padding:none;

}

/* CENTERS NAVBAR TEXT */
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar {
    margin-bottom: 0px !important;
}

https://jsfiddle.net/RyanGross1993/04ybbs2v/1/

Answer 1

您必须放置border: 0和padding: 0而不是none。

Answer 2

如果您的目标是设置完整的自适应背景图片，可以试试这个：

html {
    background: url(images/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

演示： https://jsfiddle.net/iRbouh/6vqm57bb/

有关background-size的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

我希望这会有所帮助。

Answer 3

只有你必须设置一个类.row的div：

<div class="container-fluid">
  <div class="row">
    <img class="img-responsive" src="http://feelgrafix.com/data_images/out/12/859723-nature-background.jpg">
  </div>
</div>

你也可以使用封面作为背景尺寸。

jsfiddle

去除背景中的白色差距

3 个答案: