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

Question

我有一个背景由4部分组成的表单：frame_border_top.png（高度18px）、form_border_top.png（高200px，这张图片上有渐变）、frame_border_middle（高度1px，repeat-y）和frame_border_bottom.png（18px）。我需要从这些图像中构建表单背景。困难在于表单内容应该开始显示na form_border_top.png（它应该是前5或6个输入的背景）。因此形式应该是（从上到下，像素在Y轴上）：0-17px frame_border_top.png18px-217px表单_border_top.png218px-599px（或其他级别，取决于内容高度）frame_border_middle600px-617px frame_border_bottom

文本从20像素开始。

如何使用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>

和

#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;
}

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

Answer 1

我修改了pngs。我创建的外层只有边界和透明的内部。然后我为渐变背景创建了png，但没有边框。然后很容易把所有的东西放在一起。