5

CMS 用の基本的な HTML コードを作成しています。CMS のページ関連オプションの 1 つは、「背景画像」と「ページの幅/高さを背景画像の幅/高さに引き伸ばす」です。大きな背景画像を使用すると、全体が見えるようになります。

現在の画面解像度は 1280 x 1024 です。

私が次のことをした場合：

  • 幅 1400px の背景画像を指定してください
  • 「位置」を「センターセンター」（横/縦）で指定
  • 「ページ幅を背景画像幅に合わせる」を指定

FF では、次のことが起こります。

  • ページは 1400px に正しく引き伸ばされます。画面がそれよりも小さいため、水平スクロールバーが表示されます。ここまでは順調ですね。
  • そして今、奇妙なこと:背景画像は1400pxに対して中央に配置されていないため、画像全体が表示されますが、1280pxのビューポートに対しては、画面の左端を超えて画像の一部が隠され、白い縞模様が残ります画像全体を表示する代わりに、右側に。
  • 何かを操作できる追加の要素 (DIV、ラッパーなど) はありません。すべての設定は本体に直接入っています。

更新: IE はそれを正しく行います。Google Chrome にも同じ問題があります。

これは、Firefox が最初に背景画像を 100% 幅でレンダリングし、中央に配置してから、本体を 1400px に引き伸ばす必要があることに気付くかのようです。

これは通常の Firefox の動作ですか? 私にできることはありますか？

リンクを投稿するのは、すべてがクローズドな開発環境にあるため、少し面倒ですが、他のすべてが失敗した場合は、何かをまとめて確認します.

CSS:

body 
 {
 background-image: url(http://www.domain.com....image.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 min-width: 1400px;
 height: 100%;
 }
4

3 に答える 3

3

あなたはCSS仕様の癖に噛まれています：セクション14.2bodyのおかげで、要素に適用する背景画像はhtml代わりに背景になります。（これは、作成者がCSS以前のブラウザーからのタグであると予想した場所でbodyタグの背景を引き続き使用できるようにすることを目的としています。）

IEでは、htmlドキュメントキャンバス全体を表し、拡大された本文の幅に合わせて拡大されます。他のブラウザでは、他のdisplay: block要素と同じように機能し、何を入力してもビューポートの幅を維持します。他のブラウザはここでは間違いなくより正確ですが、CSSの仕様はこのトピックについてそれほど明確ではなく、結果として、IEの結果はキャンバスに関する14.2の表現をより厳密に表しています。いずれにせよ、それは実際には信頼できる振る舞いを指定していません。

htmlの代わりに幅と背景をオンに設定すると、ブラウザ間で一貫した結果を得ることができますbody。（IEでは標準モードを使用することを忘れないでください。）

しかし、1400px固定幅のドキュメントですか？本当に悪い考えのように聞こえます。

于 2009-11-09T15:14:32.870 に答える
1

try adding:

width: 100%;
display: table;

to the body tag style (also, background-attachment: fixed; might be required)

于 2009-11-09T15:01:29.963 に答える
0

background-position は左上にする必要があります。設定しましたか

body{
margin:0;
padding:0;
}
于 2009-11-09T14:40:57.580 に答える