Css 当顶部图像较高时，在背景中形成图像

我有一个由4部分组成的背景表单：frame_border_top.png（高度18px）、form_border_top.png（高度200px，图片上有渐变）、frame_border_middle（高度：1px，重复-y）和frame_border_bottom.png（18px）。我需要从这些图像中构建表单背景。困难在于表单内容应该开始显示na form_border_top.png（它应该是前5或前6个输入的背景）。因此，表格应为（从上到下，像素位于Y轴上）： 0-17px frame_border_top.png 18px-217px form_border_top.png 218px-599px（或其他，取决于内容高度）帧\边框\中间 600px-617px机架底部

文本从20px开始

如何使用css来设置样式？这将很容易，但这是form_border_top.png的一部分

它必须在IE7中工作

我试过这样的HTML

    <div id="Content">
        <form action="">
            <div class="form-top"></div>
            <div class="form-background-top"></div>
            <div class="form-content">
                ... inputs ...
            </div>
            <div class="form-bottom"></div>
        </form>
    </div>

---

并尝试了不同的位置、边距和填充组合，但没有成功。

我修改了pngs。我创建的外层只有边框，内部是透明的。然后我为渐变背景创建了png，但没有边框。这样就很容易把所有的图像放在一起。

那么除了那些

上已有的背景图像之外，您还想添加边框图像吗？所以

.form top

具有form_top.png背景图像的，应该具有form_border_top.png的边框？是的。但我将不得不修改png，但这可能是最好的方式

#Content {
    width: 942px;
}

form {
}

.form-top {
    background: url("images/form_top.png") no-repeat scroll 0 0 transparent;
    height: 18px;
}
.form-background-top {
    background: url("images/form_background.png") no-repeat 
        scroll 0 0 transparent;
    height: 200px;
}
.form-content {
    background: url("images/form_middle.png") repeat-y 
        scroll center 0 transparent;
}
.form-bottom {
    background: url("images/form_bottom.png") repeat 
        scroll 0 0 transparent;
    height: 18px;
}