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

发布于 2024-11-28 01:51:50 字数 908 浏览 1 评论 0原文

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

Basically I want to make container with 3 semi-transparent image backgrounds, so I can put content over all of them. Concept is

Background #1 static size

Background #2 resizable size

Background #3 static size

And I want to be able to put content over all this 3 backgrounds to get such an effect.

I was thinking about something like this:

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

In effect, block are sized ok, but I don't have idea how to put text over 3 blocks, and make size still ok.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

戈亓 2024-12-05 01:51:50

您可以使用“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;
}

You can use a "float-under" approach...

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;
}
机场等船 2024-12-05 01:51:50

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

Just put the text inside the divs with the background images. if you don't want your content to grow the size of the div, you should look at using css, specifically 'overflow'

恬淡成诗 2024-12-05 01:51:50

您不需要使用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/

you don't need to use position:absolute elements. You can do this:

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

and in your css:

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

see it in action here: http://jsfiddle.net/yfLSK/1/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文