html - Bootstrap CSS/HTML 背景图像调整大小

Question

当我调整浏览器大小时使用 Bootstrap ，背景中的图片会缩小，而背景颜色不会缩小。

以下是包含 HTML 代码的网站链接: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: 20px;
}

div.jumbotron {
  background-image: url('img/chicago2.jpg');
  background-color: #3FF;
  background-size: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

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

Answer 1

如果我理解正确，不确定，因为背景颜色确实不缩小，但我认为你的意思是你的图像应该调整大小并且颜色应该不像现在处于全 View 状态。所以如果理解正确的话。

更改此:

background-size: 100%;

至

background-size: cover;

并添加浏览器的供应商以使其跨浏览器:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

查看有关 background-size的更多信息