0

次の方法でフルサイズの背景を使用しています。

background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Q1. ページを拡大して余分なコンテンツを表示すると、背景がジャンプして大きくなります。これを止める方法はありますか?

Q2. IE7-8 のカバー bg の回避策または代替手段は何ですか?

ありがとう

4

1 に答える 1

1

私が間違っている場合は修正してください。ただし、背景画像が垂直方向に拡大/移動しないようにしようとしていると思いますよね? その場合、おそらくこの CSS はあなたが望むことを行うでしょう:

    background-image: url('/static/img/background/my_bg.jpg');
    background-size: auto 1080px;
    background-position: center top;
    background-repeat: no-repeat;

背景の垂直サイズは 1080px に設定されていますが、静的な値になるように任意に設定できます (幅の auto* 値は、単に画像の縦横比を保持します)。これにより、画像がスケーリングされなくなります。Center Center の代わりに Center Top を配置に使用すると、画像が上部中央に固定されたままになるため、ページが垂直方向に拡大されても下に移動しません。

画像を縮小したいが、特定のポイントまで拡大したい場合は、Div タグを使用してページ全体を囲み、画像を Div の背景として設定する必要があると思います。そこから、画像をスケーリングするように設定し、最大幅と最大高さを設定できるはずです。

これで解決しない場合は、達成しようとしている効果に関する詳細情報をいただければ幸いです。:)

于 2013-05-05T18:27:12.013 に答える