Question

是否可以让包装元素的背景图像延伸到网格之外，同时保持响应？

我可以使用盒子阴影技术用纯色做到这一点，但是我无法让背景图像突破网格。

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

Answer 1

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

如果是，您必须将div class="inner-content"的结尾移到最后，并修改.inner-content的css，就像在小提琴中一样。

希望这有帮助

干杯

如何在使用网格时获得背景图像以扩展整个宽度？

1 个答案: