Question

我有一个不寻常的要求，我真的很挣扎。我创建了一个图像来说明我正在尝试做的事情：

enter image description here

基本上这是一个由3个区域组成的DIV - 顶部，中部和底部。所有3个区域都有背景图像，我需要中间区域（蓝色位包括其边框）以扩展内容。所以内容越多，中间区域越大。问题是内容实际上需要覆盖整个DIV，而不仅仅是中间区域。

这就是我现在所拥有的：

HTML：

<div id="panel">
    <div id="top"></div>

    <div id="middle">
        <div id="content">
            Lorem ipsum, etc...
        </div>
    </div>

    <div id="bottom"></div>
</div>

CSS：

#panel {
    float: left;
    width: 300px;
    position: relative;
}

#top {
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100%;
    background: url(top.png) no-repeat;
}

#middle {
    float: left;
    margin-top: 100px;
    width: 100%;
    min-height: 200px;
    background: url(middle.png) repeat-y;
}

#bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: url(bottom.png) no-repeat;
}

这不起作用，可能是不正确的方法。有人有任何想法吗？

Answer 1

内容从不涵盖所有内容，因为它在中间中间面板，而中间的内容定位为永远不会占用整个{{1} } - 将#panel移到#content元素中......

#panel

使用<div id="panel"> <div id="top"></div> <div id="middle"></div> <div id="bottom"></div> <div id="content"> Lorem ipsum, etc... </div> </div>和#middle等position: absolute;定位#top：

#bottom

http://jsfiddle.net/trolleymusic/yqure/

Answer 2

我会这样做：

http://jsfiddle.net/5dvgk/5/

HTML：

    <div id="middle">
        <div id="content">
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
            Lorem ipsum, etc...<br/>
        </div>
    </div>

    <div id="bottom"></div>
</div>

的CSS：

#panel {
    width: 330px;
    position: relative;
    background: url(http://oi44.tinypic.com/acoeo.jpg);
}

#top {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    height: 170px;
    width: 100%;
    background: url(http://oi43.tinypic.com/2zedqqc.jpg)
}

#middle {   
    position: relative;
    z-index: 1;
    min-height: 300px;
    padding-left: 50px;
    padding-top: 70px;
    padding-bottom: 70px;
}

#bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    height: 170px;
    width: 100%;
    background: url(http://oi43.tinypic.com/34i0jeu.jpg);
}

Answer 3

您需要添加一个与我称之为背景区域的内容区域

这是一个小提琴http://jsfiddle.net/5dvgk/2/

做这样的事情：

<div class="panel">
    <div class="background">
        <div class="top">
        </div>
        <div class="middle">
        </div>
        <div class="bottom">
        </div>
    </div>
    <div class="content">
        Your content goes here
    </div>
</div>

你的CSS就是这样的

.panel {
    float: left;
    width: 300px;
    position: relative;
}
.background {
    width:100%;
    height:100%;
    z-index: 1;
}
.top {
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100%;
    background: url(top.png) no-repeat;
    z-index: 2;
}
.middle {
    position:absolute;
    top:0;
    left: 0;
    height:100%;
    width:100%;
    z-index: 1;
}
.bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: url(bottom.png) no-repeat;
    z-index: 2;
}
.content {
    float: left;
    width: 300px;
    position: relative;
    z-index: 4;
}

Answer 4

从其他答案中可以看出，实际上有多种方法可以做到这一点。

我决定使用纯粹的CSS和一点点“scooting”的位置：相对。此外，除非中间内容框的背景图像在内容区域中是透明的，否则此方法将不起作用。

我还删除了一些不必要的浮动并定位绝对值，因为这些框可以叠加在一起：

查看这个小提琴，我在IE9 / FF / Chrome中进行了测试，但我确信它至少可以用于IE6，因为我之前使用过这种方法。 http://jsfiddle.net/shayl/KwWjt/1/

enter image description here

我不得不对你的中间内容框以及你想要它的外观做出假设，但我使用的是背景图片。

<小时/> CSS

            #panel {
                width: 234px;
            }

            #top {
                height:49px;
                background: url(http://s7.postimg.org/f1usobsnf/top.gif) no-repeat;
                z-index:1;
            }

            #middle {
                position:relative;
                top:-20px;
                width: 134px;
                min-height: 200px;
                padding:0 50px 0 50px;
                background: url(http://s23.postimg.org/gups2v0wb/mid.gif) repeat-y;
                z-index:2;
            }

            #bottom {
                position:relative;
                top:-30px;
                height:49px;
                width: 100%;
                background: url(http://s12.postimg.org/s78huz5u5/bottom.gif) no-repeat;
                z-index:1;
            }

<小时/> HTML

            <div id="panel">
                <div id="top"></div>

                <div id="middle">
                    <div id="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis condimentum lacus. Duis tempor bibendum ante, non luctus leo mollis vitae. Nunc in augue massa, ut facilisis velit. Etiam in magna lacus, in lacinia lectus. Nulla facilisi. Aenean rutrum, magna sed molestie condimentum, magna arcu ornare nisl, id luctus turpis felis ornare lorem. Aenean placerat erat in nisi convallis feugiat. Ut sodales tincidunt tellus, nec eleifend ligula posuere nec. Proin sit amet quam quam, mollis laoreet diam. Sed volutpat libero et velit commodo laoreet. Vestibulum eros dui, hendrerit molestie sodales eget, ullamcorper sed enim. Integer tempus, eros at dapibus ultricies, mauris risus sagittis metus, quis consequat massa mi quis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sagittis blandit odio, sed vulputate quam egestas id. 
                    </div>
                </div>

                <div id="bottom"></div>
            </div>

Answer 5

在most newer browsers which support parts of the CSS3 specification中，您可以使用CSS3 multiple backgrounds轻松完成此操作，如果您需要支持旧浏览器，那么您当前的方法并不是太糟糕，您需要绝对定位您的顶部和底部您已经完成了div次，然后通过设置div属性（{{1}确保顶部div在中间的position后面呈现如果未设置z-index，则无效，然后专门设置position。

这是一个 jsFiddle 并排显示两种方法。左边的那个是使用CSS3多个背景，另一个是你已经采用的方法的固定版本。

<强> HTML

z-index

<强> CSS

<div id="css3-multiple-backgrounds">Content goes here..</div>

<div id="any-browser-not-using-css3">
    <div class="top"></div>
    <div>Content goes here..</div>
    <div class="bottom"></div>
</div>

Answer 6

上面的很多选项需要相当复杂的HTML / CSS。以下示例仅需要两个DIV标记和一些CSS。

<强> HTML：

<div class="border">
  <div class="content">
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
    Lorem ipsum, etc...<br/>
  </div>
</div>

<强> CSS：

.border { 
    position: relative; 
    width: 234px;
    background: #fff url(http://i41.tinypic.com/axzj0o.jpg) top center repeat-y;
}
.border:before, .border:after {
    position: absolute; 
    content: '';
    display: inline-block;
    height: 53px; width: 234px;
}
.border:before {
    top: 0; left: 0;
    background: transparent url(http://i41.tinypic.com/2jgwn6.jpg) top center no-repeat;
}
.border:after {
    bottom: 0; left: 0;
    background: transparent url(http://i43.tinypic.com/vfiiag.jpg) bottom center no-repeat;
}
.border > .content { 
    background: transparent;
    position: relative;
    padding: 13px;
    z-index: 1;
}

此解决方案只需3个重叠图形即可工作，如下所示：

背景

Background http://i41.tinypic.com/axzj0o.jpg
热门

Top http://i41.tinypic.com/2jgwn6.jpg
底部

Bottom http://i43.tinypic.com/vfiiag.jpg

背景图片应用于外部DIV，.border，并允许repeat-y（沿y轴垂直重复）。顶部图像应用于:before伪元素，底部图像应用于:after伪图像。

接下来，.content DIV，:before和:after元素全部position，以便他们可以应用z-index。由于:before和:after为position: absolute，因此它们不再占用流量中的空间 - 因此它们不会影响.content或彼此的定位。

这意味着.content内部 - DIV将在其父级内部流动，填充到.border的角落。

但是，仍然需要z-index: 1才能显示:before和:after元素，这样才能完成效果。

正如您所看到的，我冒昧地对您的特定图像进行photoshopping，以便您可以看到它正常工作。以下是结果的屏幕截图：

Result http://i39.tinypic.com/2z3ula8.jpg

这是一个jsFiddle which demonstrates it working。

Answer 7

我不知道这可以用纯CSS完成，但我会这样做：

设置3个区域，然后添加推送：

<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="push"></div>
  <div id="bottom"></div>
</div>

从流程中删除内容：

#content { position: absolute; }

并计算推高：

h = $("#content").height() * 0.5;
$("#push").css( { "height": h } );

看到这个小提琴：http://jsfiddle.net/RM9NS/1/

Answer 8

如果您愿意尝试使用css3，则可以将多个背景应用于同一个标签。虽然您必须小心，因为使用此方法可能会使具有明显特征的拉伸图像（例如上面的星星）变形。

我玩了一个例子。虽然它似乎没有给我我正在寻找的东西，但我接近你正在谈论的内容。这对于基于渐变且没有明显特征的图像来说会很棒。但是，任何伸得太远的图像都会导致像素化。我见过的这个品种的大多数css都会产生1px宽的“如此多”长度的渐变。拉伸像这样的元素更难以看到像素化。

<html>
<head>
 <style>
#container {
background: url(red.jpg) no-repeat, 
            url(checkered.jpg) no-repeat, 
            url(purple.jpg) no-repeat;

background-position: 0 0 , 0 20%, 0 100%;
background-size: 100% 20%, 100% 80%, 100% 20%;
}
 </style>
</head>
<body>
    <div id="container">
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>

    </div>
</body>
</html>

Answer 9

请参阅：jsFiddle

如果需要，您可以调整margin并设置display: inline-block; width: --px;。

修改

再次阅读问题之后，我想出了这个：http://jsfiddle.net/5dvgk/7/

Answer 10

为什么不尝试将这三个图像附加到一个图像文件中。这样你只需要一个div而不需要棘手的造型。

使用背景图像扩展DIV

10 个答案: