Question

是否可以通过css2来实现以下目标：

灵活的div.mid部分中的所有内容
重叠顶部和底部
没有关于ie6

这是带有中心切片的photoshop：

alt text http://i39.tinypic.com/11qnzbt.jpg

你可以看到顶部和底部非常大，我需要从中间切片重叠它们......

请不要误解这里，我理解如何制作一个灵活的中央div，复杂性在于顶部和底部的重叠，而中间div保持灵活。

我想它需要负边距或绝对定位顶部和底部元素与z-index ..

Answer 1

这是一个启动示例，你可以复制'n'paste'n'run它。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2781669</title>
        <style>
            #wrap_centre {
                width: 1000px;
                margin: 0 auto;
            }
            .top {
                padding: 0 100px;
                height: 200px;
                background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center top;
            }
            .mid {
                padding: 0 100px;
                background: url('http://url.to.1px.height.slice.jpg') repeat-y center center;
            }
            .content {
                position: relative;
                min-height: 200px;
                top: -100px;
                margin-bottom: -200px;
            }
            .bot {
                padding: 0 100px;
                height: 250px;
                background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center bottom;
            }
        </style>
    </head>
    <body>
        <div id="wrap_centre">
            <div class="top"></div> 
            <div class="mid">
                <div class="content">mid<p>mid<p>mid<p>mid<p>mid<p>mid<p>mid</div>
            </div>             
            <div class="bot"></div> 
        </div>
    </body>
</html>

您只需要为.mid创建一个新切片。

更新：根据评论，上述内容已更新。

高级css：顶部和底部，灵活的中心

1 个答案: