3

次の構成のヘッダーバナーを含むWebページがあります。

<---Repeating Image Left--><---Banner Image---><---Repeating Image Right--->

ページは固定幅のコンテンツで設計されていますが、バナーはブラウザウィンドウの幅全体に広がっています（したがって、左右に繰り返し画像を含める理由）。

2つの繰り返し画像は異なり、どこにでも配置できる標準の背景画像でもありません。代わりに、左側の画像をバナー画像の左側に固定/貼り付けてから、ブラウザウィンドウが展開されるときに、その時点から左方向に繰り返す必要があります。同様に、右側の画像はバナー画像の右側に固定/貼り付けて、そのポイントから右方向に繰り返す必要があります。

バナー画像の左側/右側から目的の方向に画像が外側に向かってではなく、ブラウザウィンドウの左側から画像が繰り返される/並べて表示されるため、セットで純粋なbackground-image:プロパティを使用することはできません。repeat-x

望ましい効果を達成するための助けをいただければ幸いです。

4

3 に答える 3

2

はい、単一のスタイル付き要素でこれを行うことができます:

#banner {
  height: 50px;
  width: 50%; margin: 0; padding-right: 50%;
  background-image:url('banner.png'), url('left-bg.png'), url('right-bg.png');
  background-clip: padding-box, content-box, content-box;  
  -webkit-background-clip: padding-box, content-box, padding-box; 
  background-origin: padding-box, content-box, padding-box;
  background-position: center, right, center;
  background-repeat: no-repeat, repeat-x, repeat-x;
}

この要素には 3 つの背景があります。トリックは、左右に異なるものを表示することです。これは、左側に 50% のパディングを追加することで行いました。左が「パディングボックス」、右が「コンテンツボックス」です。

最初の背景<img>を にして、タイトル タグを付けることができます。そうすると、ウィンドウの右側の 50% にのみ表示されるため、左揃えにして使用する必要がありますposition:relative; left:-250px。真ん中に戻します。

最後に、背景画像はバナーの端ではなくウィンドウの中央に固定されていますが、画像自体を変更することで修正できます。

于 2012-06-29T12:44:22.747 に答える
0

サイトを確認するための URL を提供できますか? css プロパティを試す必要があるようです。

background-position {x, y}
于 2012-06-29T11:37:57.510 に答える
-1 
banner
{
background-image:url('image.gif');
background-repeat:repeat-x;
vertical-align: middle;
text-align: center; /*optional*/
}

これが機能するかどうかはわかりませんが、試してみる価値があります。

于 2012-06-29T11:48:18.160 に答える