我正在尝试使用Bootstrap进行条纹水平设计。
这是一个示例：http://getonepager.com
如图所示，它使用<section>，其中具有一个带有div类的.container（不是.container-fluid）。
我从该站点不了解的内容如下：
他们如何使部分背景颜色/图像覆盖网站的整个宽度？当我尝试使用CSS中的background-image进行类似的处理时，它不能覆盖页面的整个宽度。这是从他们的CSS：
#features {
background-image: url(http://getonepager.com/wp-content/uploads/2015/07/bg1.png);
background-repeat: no-repeat;
background-size: contain;
background-color : #ffffff;
color : #727272;
}
放大和缩小时背景图像如何不缩放
您浏览器的页面？
我尝试使用以下代码将其完成，但未成功：
<html>
<head>
<title>TODO supply a title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.content{
padding:20px;
border: 1px solid #269abc;
}
[class*="col-"] {
padding-top:10px;
padding-bottom:10px;
border:1px solid #80aa00;
background:#d6ec94;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
#one {
background-image: url(http://getonepager.com/wp-content/uploads/2015/07/bg1.png);
background-repeat: no-repeat;
background-size: contain;
background-color : #ffffff;
color : #727272;
font-size : 48px;
}
</style>
</head>
<body>
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">ONE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">ONE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">ONE</div>
</div>
</div>
</div>
</section>
</body>
</html>
最佳答案
图片无法填充完整元素的原因是因为您使用了background-size:contain;。这样，通过调整图像大小以适合高度或宽度，图像将包含在该元素内。如果一种尺寸小于另一种尺寸，那就这样吧。
图像将变得足够高以适合元素，或者在您保持相同宽高比的情况下，足够宽以适合元素。
这也是为什么图像无法缩放的原因。该元素的宽度也是浏览器的宽度。因此，contain使图像宽度与元素宽度（即浏览器的宽度）相同。
关于html - 带容器的全宽背景(非容器流体)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37860741/