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

Question

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

背景#1静态尺寸

背景#2可调整大小

背景#3静态尺寸

我希望能够将内容放在所有这3个背景上以获得这样的效果。

我在想这样的事情：

<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 个块上，并使大小仍然可以。

Answer 1

您可以使用“float-under”方法...

在 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;
}

Answer 2

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

Answer 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/