4 
html {
    height: 100%;
    overflow: hidden;
    background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

こんにちは兄弟。私はこのスケーラブルな背景画像をこのWebサイトで機能させるように努めてきましたが、偽物の左側に奇妙な不正な白い線があります。

http://jsfiddle.net/49n73/1/

フィドルを使用して問題を把握し、「結果」ウィンドウをできるだけ大きくして、実際に不正な線が見えるようにします。これを引き起こしているのは何ですか？

4

1 に答える 1

5

background-image問題は、中央揃えであることに関連するスケーリングのバグのようです。

以下を変更することで修正できます。

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;

これに：

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat 0 0 fixed;

つまり、これはbackground-positionからcenter centerをに変更すること0 0です。したがって、常に左上から拡大縮小され、横に隙間（白い線）が残らないようにします。

ライブデモ： http： //jsfiddle.net/49n73/11/embedded/result/

于 2013-01-31T13:41:37.973 に答える