使用网格时如何让背景图像扩展全宽？答案

【问题标题】：How to get a background image to extend full width when using a grid?使用网格时如何让背景图像扩展全宽？
【发布时间】：2013-10-28 16:34:07
【问题描述】：

是否可以让包装元素的背景图像超出网格范围，同时保持响应？

我可以使用框阴影技术使用纯色来实现，但我无法让背景图像脱离网格。

我正在使用 12 列灵活、基于百分比的网格，其最大宽度为 1140 像素并浮动列。设置包装元素的背景图像最终为 1140 像素，除非我给元素一个绝对宽度（如 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;            
}

【问题讨论】：

我在想一个伪元素，比如 :before 可能会这样做，但我使用它们的经验有限，不知道如何编写它。
您是否可以创建一个小提琴来看看您到底想要什么？
@ajc - 这是一个小提琴jsfiddle.net/mPGQQ

标签： css grid sass background-image

【解决方案1】：

这是你想要的吗？ http://jsfiddle.net/mPGQQ/7/

如果是，您必须将 div class="inner-content" 的末尾移动到末尾，并按照小提琴中的方式修改 .inner-content 的 css。

希望对你有帮助

干杯

【讨论】：

不完全是。我只希望背景适用于一个 div。像这样，但是在蓝色的地方，我希望能够使用bg图像：jsfiddle.net/jackiesc/mPGQQ/8
另外，因为一切都在同一个网格上，我不能只是移动内部内容的 div 而不使其他一切都倾斜。
好的，这一款是否足以满足您的需求 jsfiddle.net/mPGQQ/35 ？您可能没有使用百分比或大小，但我认为这与您期望的结果非常接近..