html - 如何使用 CSS 将环绕元素扩展到整个浏览器宽度？

Question

我正在开发一个模板，该模板需要元素(h2、h3 等)的一些背景图像超出(居中)页面宽度以填充浏览器窗口。

我知道一个方法来做到这一点。我在这里看到 Craig Buckler 解释的这个解决方案: http://www.sitepoint.com/css-extend-full-width-bars/

你可以在这里看到一个 fiddle : http://jsfiddle.net/Vinyl/V8ps3/

基本上，我们添加大量填充然后将元素移回其原始位置

我认为这是一个很好的解决方案，但您知道另一种解决方案吗？

html:

<div id="main">
    <div>lorem ipsum</div>
    <div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>

样式:

body {
    margin:0;
    overflow-x: hidden;
    background-color: #333333;
}
#main {
    width:250px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
}
#content {
    background-color: #999999;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    margin-right: -3000px;
    padding-right: 3000px;
    margin-left: -3000px;
    padding-left: 3000px;
}

Answer 1

DEMO ..

这是另一种解决方案..也许更简单，它对元素(h2、h3 等)使用:before

CSS

#content {
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#content:before {
    background: #999999;
    content: "";
    width: 1000%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -500%;
    z-index: -1;
}

希望这对你有帮助..