具有 3 个背景的容器，绝对 div 其父级的 100% 高度答案

【问题标题】：Container with 3 backgrounds, absolute div 100% height of its parent具有 3 个背景的容器，绝对 div 其父级的 100% 高度
【发布时间】：2011-10-19 13:07:09
【问题描述】：

基本上我想制作具有 3 个半透明图像背景的容器，这样我就可以将内容放在所有这些背景上。概念是

背景#1 静态尺寸

背景 #2 可调整大小

背景#3 静态尺寸

我希望能够将内容放在所有这 3 个背景上以获得such an effect。

我在想这样的事情：

<div style="position: absolute; height: auto;">
    <div style="background: url('images/container.png') repeat-y; height: 100%; width: 990px; position: absolute; top: 10px;"></div>
    <div style="background: url('images/containerTop.png') no-repeat; height: 10px; width: 990px; position: absolute;"></div>
    <div style="background: url('images/containerBottom.png') no-repeat; height: 11px; width: 990px; position: absolute; bottom: -21px;"></div>
    text<br />
    text<br />
    text<br />
    text<br />
</div>

实际上，块的大小还可以，但我不知道如何将文本放在 3 个块上，并使大小仍然可以。

【问题讨论】：

标签： css html background height

【解决方案1】：

您可以使用“浮动”方法...

See it in action at jsFiddle.

HTML：

<div class="threeLayerContainer">
    <div class="payloadText">
        Blah-dity, blabbity, blab...
    </div>
    <div class="bgTop"></div>
    <div class="bgMiddle"></div>
    <div class="bgBottom"></div>
</div>

CSS：

.threeLayerContainer {
    position:       absolute;
    height:         auto;
}
.bgTop {
    background:     red url('images/containerTop.png') no-repeat;
    height:         10px;
    width:          990px;
    position:       absolute;
    top:            0;
    z-index:        -10;
}
.bgMiddle {
    background:     powderBlue url('images/container.png') repeat-y;
    height:         100%;
    width:          990px;
    position:       absolute;
    top:            0;
    z-index:        -15;
}
.bgBottom {
    background:     yellow url('images/containerBottom.png') no-repeat;
    height:         11px;
    width:          990px;
    position:       absolute;
    bottom:         0;
    z-index:        -10;
}
.payloadText {
    width:          990px;
}

【讨论】：

我的解决方案如此接近，但到目前为止。非常感谢您的帮助！

【解决方案2】：

只需将文本放在带有背景图像的 div 中即可。如果您不希望您的内容增加 div 的大小，您应该考虑使用 css，特别是“溢出”

【讨论】：

所有这 3 个 div 都会有背景图片。我刚刚修复了示例以便更好地展示。

【解决方案3】：

你不需要使用 position:absolute 元素。你可以这样做：

<div class='container1'>
    <div class='container2'>
        <div class='container3'>
            ...
        </div>
    </div>
</div>

在你的 CSS 中：

.container1 {background:url(bottombg) repeat-x bottom left;}
.container2 {background:url(topbg) repeat-x top left;}
.container3 {color:red;}

在此处查看实际操作：http://jsfiddle.net/yfLSK/1/

【讨论】：

所有这 3 个 div 都会有背景图片。我刚刚修复了示例以便更好地展示。