0

960ピクセルのデザインのウェブサイトを構築していますが、デザイナーから、ページ全体に全幅の背景写真を表示するように要求されました。彼はこれのために2000pxの画像を提供しました。

ただし、トリッキーなことに、写真の一部はページのナビゲーションに不可欠であるため、画像を中央に配置する必要があります。そのため、左端と右端をビューポートからオーバーフローさせたいと思います。CSSを使用してこれを実行しようとしましたが、失敗しました。

ドキュメントが読み込まれ、ウィンドウが調整されたときに、ビューポートに基づいて左マージンを調整するjavascriptバージョンを実行できますが、特に調整では、パフォーマンスが低下する可能性があります。サイトのターゲットオーディエンスの多くは、いくつかの深刻なレガシーハードウェアを持っているため、IE6を実行している低速のコンピューターを使用します。これを行うための優れたCSSの方法はありますか？

更新：申し訳ありませんが、「全幅」のことに関してはあまり明確ではありませんでした。サイトのコンテンツはすべて960pxの列に制限されていますが、この特定の画像は960pxを超えている場合でも、ブラウザウィンドウの全幅である必要があります。background-positionを使用することは私がすでに試した方法ですが、特定のdivのサイズを2000px幅にすると、divを中央に配置できませんでしたが、100％background-positionに設定すると次のようになります。センターが機能していないようです

4

3 に答える 3

1

これを行う1つの方法はbackground-position: center top;、2000pxの画像を背景として960pxのdivに次のように配置することです。

デモ

私の知る限り、これはIE6+でサポートされています

于 2013-02-18T15:18:56.980 に答える
0

バックグラウンドポジショニングを使用するだけです。

body {
    background: url(blah.jpg) center top no-repeat;
}
于 2013-02-18T15:26:29.253 に答える
-1

画像で次のようなものを試してください。 

position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */

ただし、画像の一部をナビゲーションに使用する予定で、幅が2000ピクセルに固定されている場合、将来的には多くの涙が見られます。

画像を個別に操作できるレイヤーに分割することを検討してください。

編集：マイケルが述べたように、このアプローチは良くありません。

于 2013-02-18T15:23:24.097 に答える