Контейнер с 3 фонами, абсолютный div 100% высоты его родителя - PullRequest
Новая
       14

Контейнер с 3 фонами, абсолютный div 100% высоты его родителя

2 голосов
/ 04 августа 2011

По сути, я хочу создать контейнер с 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 блока, и сделать размер все еще в порядке.

Ответы [ 3 ]

2 голосов
/ 04 августа 2011

Вы можете использовать подход с плавающей точкой ...

См. Это в действии на 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;
}
0 голосов
/ 04 августа 2011

вам не нужно использовать позицию: абсолютные элементы. Вы можете сделать это: 

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

0 голосов
/ 04 августа 2011

Просто поместите текст внутри div с фоновыми изображениями. если вы не хотите, чтобы ваш контент увеличивался до размера div, вам следует рассмотреть использование css, в частности, «overflow»

...