是否可以让包装元素的背景图像延伸到网格之外，同时保持响应？
我可以使用框阴影技术用纯色来完成它，但我无法让背景图像脱离网格。
我使用的是一个 12 列的灵活的、基于百分比的网格，它的最大宽度为 1140 像素并 float 列。设置环绕元素的背景图像最终为 1140px，除非我给元素一个绝对宽度(比如 150%)，这会破坏响应能力，我敢肯定这无论如何都是不好的做法。
我的布局很简单，像这样
<body>
<container>
<header></header>
<inner-content>
<grid-element-one></div>
<bg-wrap>
<grid-element-two></div>
</div>
<grid-element-three></div>
</inner-content>
<footer></footer>
</container>
</body>
它被布置在我需要具有背景图像的元素位于其他网格部分之间的位置。所以我不能只是把它放在页脚或其他东西上面，然后在它受到影响之前让网格结束。
CSS 也很简单。
.inner-content {
max-width: 1140px; /* when 768px+, otherwise 96% */
}
.element-two {
color: $font-color;
background-color: $bg-gray;
box-shadow: -25rem 0 0 $bg-gray, 25rem 0 0 $bg-gray;
height: 475px;
}
.bg-wrap {
background: url(../images/bg/texture.png) 0 80px repeat;
}
最佳答案
这是你想要的吗？ http://jsfiddle.net/mPGQQ/7/
如果是，您必须将 div class="inner-content" 的末尾移动到末尾，并修改 .inner-content 的 css，如下所示 fiddle 。
希望对你有帮助
干杯
关于css - 使用网格时如何使背景图像扩展到全宽？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19626164/