html - 如何将元素的背景扩展到其容器之外？

Question

我有一个包含 h3 标签的 div，我希望 h3 的背景超出包含的 div 标签并延伸到页面边缘。有没有办法在 CSS 中做到这一点？
我考虑过绝对定位 h3，但我不知道从屏幕边缘到 div 边缘(我想要它的位置)的大小，因为 div 居中。

Answer 1

在此页面上，我使用 Firebug 更改了问题标题的 css。

#question-header h2 {
    background:lime;
    margin-bottom:-1000px;
    padding-bottom:1000px;
}

事情是这样的:
_{(来源:zastica.com)}

有一个#question-header div 只延伸到问题的顶部(“我有一个div ...”)。关键是有一个大的 padding-bottom 和一个大的(负)margin-bottom。

这也适用于并排背景。您只需确保容器没有设置overflow: hidden。

编辑:要左右获得此效果，请设置:

html {
    overflow-x: hidden;
}

#question-header h2 {
    padding: 0 1500px;
    margin: 0 -1500px;
}

html { overflow-x: hidden; 防止页面宽度由于填充而变得非常大。