html - 如何去掉背景图片的边距？

Question

http://codedifferently.com/crest.html是我正在处理的页面。

这是我的 CSS 文件:

@charset "UTF-8";
/* CSS Document */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 0px;
}

div.jumbotron {
    background-image: url('img/chicago2.jpg');
    background-color: #CCC;
    background-size: cover;
    height: 450px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
    margin-top: 0px;
    padding: 0px;

}

div.navbar navbar-default navbar-static-top" role="navigation {
    border: 0px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 0px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 0px;
  margin-left: 0px;
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 0px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

我正在使用 Bootstrap 框架上的 Jumbotron 预设。

我如何去除背景图像的边框以及我应该如何在特写镜头上添加边距/填充以使它们远离边缘？我已经把我的 jumbotron.我的源代码顶部的 css 文件，但它没有任何效果。是因为 bootstrap css 文件干扰吗？

Answer 1

我在您的示例中没有看到边框，但是，我看到了 Jumbotron Bootstrap 中的填充，因此如果您指的是您无法在其中工作的空间的边框:Jumbotron 按标准使用 30px 的填充。你可以覆盖它:

.jumbotron {padding: 0px;}

但是，您在该页面上的 css 与您发布它的方式不同。您在页面上作为 Jumbotron 类给出的 CSS 如下。

div.jumbotron {
    background-image: url('img/chicago2.jpg');
    background-color: #3FF;
    background-size: cover;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
}

所以要么你没有更新你的样式表到上面的内容，要么你在某处打错了字。

所以我在图像中检查了 30px 的填充，加上媒体查询中的顶部和底部的填充，它工作得很好。此外，因为您已经在文本中添加了一个容器，所以您也受容器大小的约束。提醒一下，如果您认为它不会在屏幕左侧显示轮廓。

它还有一些针对特定尺寸的媒体查询，您可能还需要更改它们。\

-- 编辑--

顺便说一句，我不想​​说出格，但你的 bootstrap.min.js 和你的 IE-10 视口(viewport)工作环境出现内部服务器错误。

最后但并非最不重要的一点。您在 jquery 文件之前调用 bootstrap min 文件，这是一个禁忌，如果在 bootstrap 文件之前没有调用 jquery，bootstrap 将无法运行。移除你头脑中的上部 Bootstrap ，否则它会导致错误，顺便说一句，这是第一个错误，因为你还在页脚下方的 yoru 脚本中放置了 Bootstrap ，你很高兴去