1

ページの中央に高さと幅が固定されたヘッダーがあります。ヘッダー画像の各端から、その幅の残りのスペースで繰り返したい小さな 1 ピクセルの画像を撮影しました。

とにかく、私の問題は、小さな画像をヘッダーの周りで繰り返すことができないことです。ヘッダーの右の背景画像を繰り返そうとすることから始めましたが、代わりに、その背景は次の「行」にジャンプしてそこで繰り返されます。「行」全体で繰り返される左のヘッダー bg 画像を追加すると、右のヘッダー画像がその下に入ります。

編集 - jsfiddle にあります。私の問題を理解するのに役立つことを願っています。 http://jsfiddle.net/kEdGb/

ここにhtmlがあります：

<div id="HeaderContainer">
    <div id="HeaderLeft"></div>
    <div id="Header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>

            </ul>
        </div>
    </div>
    <div id="HeaderRight"></div>
</div>

そしてCSS：

#HeaderContainer {
    width: 100%;     
}

#Header
{
    background-image: url(images/header_image.png);
    background-repeat: no-repeat;
    background-color: #707173;
    height: 210px;
    width: 990px;
    max-width: 990px;
    margin: 0px auto;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    position: relative;
    border-top-style: solid;
    border-top-color: #707173;
    border-top-width: 1px;
    border-left-style: solid;
    border-left-color: #707173;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #707173;
    border-right-width: 1px;
}

#HeaderLeft {
    background-image: url(images/headerLeft.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#HeaderRight {
    background-image: url(images/headerRight.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#Menu {
    max-width: 95%;
    position: absolute;
    bottom: 0px;
    left: 5%;
}

どのブラウザでも動作しません。私は何が欠けていますか？:)

4

4 に答える 4

1

あなたの質問から私が理解したのは、背景画像をヘッダー コーナーにのみ実装したいということです (ボーダー画像と同様)。もしそうなら、

次の手順に従ってください。

  1. テイク要素: 親と子
  2. 表示したい画像に応じて、親要素の背景画像と指定されたパディングを繰り返します。
  3. 内部要素に別の背景色または画像を割り当てます。

このように、親要素の背景画像はヘッダーのボーダー画像として機能します

乾杯、ヴィクラム

于 2013-05-16T07:18:30.447 に答える
1

画像の URL を引用符で囲みましたか? お気に入りbackground-image: url('images/headerLeft.png');

于 2013-05-16T06:51:31.903 に答える