如何將元素的背景擴展到其容器之外？

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 ...”）。 關鍵是有一個大的填充底部和一個大（負）邊緣底部。

這也適用於側面到背景。 您只需要確保容器沒有overflow: hidden set。

編輯：要左右移動此效果，請設置：

html {
    overflow-x: hidden;
}

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

html { overflow-x: hidden; } 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;
    ...
}