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

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

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

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

在 CSS 中：

h3 {
    position: absolute;
    ...
}