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

【问题标题】：How can I extend the background of an element beyond its container?如何将元素的背景扩展到其容器之外？
【发布时间】：2019-06-10 18:05:50
【问题描述】：

我有一个包含 h3 标记的 div，我希望 h3 的背景超出包含 div 标记的范围延伸到页面边缘。有没有办法在 CSS 中做到这一点？
我考虑过绝对定位 h3，但我不知道从屏幕边缘到 div 边缘的大小（我希望它在哪里），因为 div 居中。

【问题讨论】：

标签： html css

【解决方案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; } 防止页面宽度由于填充而变得非常大。

【讨论】：

【解决方案2】：

不幸的是，您尝试使用纯 CSS 是不可能的，因为您需要知道到右边缘的距离。然后绝对定位就可以了。当然，你可以使用一些 JavaScript 轻松地做到这一点，如果使用 jQuery 则更容易：

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

在 CSS 中：

h3 {
    position: absolute;
    ...
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：