如何从这张图片制作一个可垂直扩展的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/

的示例

Answer 2

试试这个： HTML：

<div class="container">
 <div class="top"></div>
 <div class="middle">content here content here content here</div>
 <div class="bottom"></div>
</div>

CSS：

.container { width: 300px; }
.top { padding-top: 15px; background: url(topimage.png); }
.middle { background: url(middleimage.png); }
.bottom { padding-bottom: 15px; background: url(bottomimage.png); }

调整CSS中的填充，使它们匹配topimage和bottomimage的高度，以及容器宽度，使其与图像的宽度相匹配。

Answer 3

使用三个单独的div，并将中间的顶部填充设置为顶部的顶部填充。所以：

#top-div {
  height: 25px;
  background-image: url(bg-top.jpg);
}
#middle-div {
  background-image: url(bg-middle.jpg);
  padding-top: -25px;
}
#bottom-div {
  background-image: url(bg-bottom.jpg);
}

Answer 4

这可以通过CSS3功能完成，例如border-radius，box-shadow和gradient。这是一个example。应该适用于Opera，Firefox，Chrome和Safari。

此外，您可以使用：在CSS伪元素之前和之后：与其他两个答案一样。

修改：对于Internet Explorer，所有这些功能都可以使用行为文件，例如PIE。