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（またはコンテンツの高さによってはwhateveor）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 に答える