8

私は次のように4つの同じサイズのdivを設定しています：

<div id="top-left"></div>
<div id="top-right"></div>
<div id="bottom-left"></div>
<div id="bottom-right"></div>

それぞれがページの幅の50％であり、絶対的に配置されます。このように、例えば：

#top-right {
position: absolute;
top: 0px;
left: 50%;
width: 50%;
height: 50%;
}

問題は、CSS3カバーを介して（大きな）背景画像を拡大縮小しようとしたときです。これは私がこれまでに持っている背景画像cssです：

background: #000 url('DSC01992.jpg') center center fixed no-repeat;
background-size: cover;
-moz-background-size: cover;
-o-(etc.)

これが実際の例です：http：//jsfiddle.net/TqQv7/

http://placekitten.com/2000/1000でプレースホルダー画像を開く と、画像が正しく拡大縮小されていないことがわかります。

私は何かが足りないのですか？

4

1 に答える 1

18

background-position速記宣言のとbackground-attachment部分を削除するとbackground、希望する結果が得られます。

変化する：

background: #000 url('http://placekitten.com/2000/1000') center center fixed no-repeat;

に：

background: #000 url('http://placekitten.com/2000/1000') no-repeat;

これがデモです：http：//jsfiddle.net/TqQv7/1/

background-positionと background-attachment一緒に使用するbackground-size : coverのは直感に反します。ブラウザに2つの異なることを行うように指示しているのですが、最近のブラウザでは、新しい方法ではなく古い方法がデフォルトになっているようです。

background-sizeMDNドキュメントのチェックアウトに関する注意事項の詳細については、 https ：//developer.mozilla.org/en-US/docs/CSS/background-sizeを参照してください。

于 2012-08-27T17:15:49.060 に答える