Question

基本上我想制作具有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个块上，并且大小仍然可以。

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

Answer 2

将文本放在带有背景图像的div中。如果你不希望你的内容增加div的大小，你应该看看使用css，特别是'溢出'

Answer 3

您不需要使用position：absolute elements。你可以这样做：

<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为其父级的100％高度

3 个答案: