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

Question

我有一个包含h3标签的div，我希望h3的背景超出包含div标签到页面边缘。有没有办法在CSS中执行此操作？ 我认为绝对定位h3，但我不知道从屏幕边缘到div边缘的大小（我希望它的位置），因为div居中。

Answer 1

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

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

发生了这种情况：alt text http://public.zastica.com/so-background.png

有一个＃question-header div只能扩展到问题的顶部（“我有一个div ...”）。关键是有一个大的填充底部和一个大的（负）边缘底部。

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

编辑：要左右移动此效果，请设置：

html {
    overflow-x: hidden;
}

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

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

Answer 2

元素背景不能超出它的边界框。

在某些情况下，您可以通过设置负边距将H3扩展到容器之外，但是您需要页面的确切宽度。

似乎您可能只想重新组织HTML以使其成为可能。

Answer 3

不幸的是，你需要知道通过简单的CSS做什么，因为你需要知道到右边缘的距离。然后绝对定位可以正常工作。当然，您可以使用一些JavaScript轻松完成此操作，如果使用jQuery，则更容易：

$(function() {
    $('h3').each(function() {
        $(this).width($(window).width() - $(this).offset().left);
    });
});

在CSS中：

h3 {
    position: absolute;
    ...
}