css - 如何从这个图像制作一个垂直可扩展的 DIV 框？

Question

我想根据这张图片为我的网站创建一个样式化的 DIV 框:

我如何使用 CSS 和 HTML 来做到这一点。

我将图像分成三个不同的部分:

• 

• 

• 

但是我不知道如何将它们与 Divs 一起使用来创建我的垂直可扩展框。

感谢您的帮助!

Answer 1

我假设您希望您的内容从顶部开始，但也扩展到第二个。如果是这种情况，那么您将需要在背景图像上进行一些重叠。

HTML

<div class="expandable">
    <div class="content top">content goes here</div>
    <div class="bottom"></div>
</div>

CSS

.expandable{
    background:url('middle-image.jpg') 0 0 repeat-x;
}
.top{
    background:url('top-image.jpg') 0 0 no-repeat;
    height:auto!important;
    height:100px;/* whatever the height of the top (big) area is */
    min-height:100px; /* whatever the height of the top (big) area is */
}
.bottom{
    background:url('bottom-image.jpg') 0 0 no-repeat;
    height:10px; /* whatever the height of the bottom image is. */
}

例子在 http://www.jsfiddle.net/gaby/s8XZQ/