1

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

我可以使用盒子阴影技术使用纯色来完成它，但我无法让背景图像脱离网格。

我正在使用一个 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;            
}
4

1 回答 1

0

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

如果是的话，你必须把你的结尾移到最后，然后像小提琴一样div class="inner-content"修改css 。.inner-content

希望这可以帮助

干杯

于 2013-10-28T08:34:07.523 回答