0

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

文字从 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>

和

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

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

4

1 回答 1

0

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

于 2012-11-08T00:03:11.597 回答