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

Question

我想从此图像为我的网站创建一个样式化的 DIV 框：

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

我将图像剪切为三个不同的部分：

• 

• 

• 

但是我不知道如何将它们与 Div 一起使用来创建我的垂直消耗品盒子。

感谢您的帮助！

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

这可以通过 CSS3 功能（如边框半径、盒子阴影和渐变）来完成。这是一个示例。应该适用于 Opera、Firefox、Chrome 和 Safari。

另外，您可以使用 :before 和 :after CSS 伪元素来执行此操作，就像其他两个答案一样。

编辑：对于 Internet Explorer，所有这些功能都可以通过行为文件实现，例如 PIE。

Answer 3

试试这个：
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 中的填充，使其与顶部图像和底部图像的高度相匹配，并调整容器宽度，使其与图像的宽度相匹配。

Answer 4

使用三个单独的 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);
}