CSSはブラウザによって背景画像のサイズが変わらないことを認識 scaling_html/css_WEB-ITnose

Baidu Personal Edition のホームページなど、一部の Web サイトのホームページの背景画像のサイズは、拡大縮小しても変化しません。

別の例は Huaban.com (huaban.com) です。

次に、CSS を使用してこの効果を実現します。

まず、上記の Baidu 背景画像のサイズは 1600*1000 ピクセルです (画像アドレス: http://4.su.bdimg.com/skin/12.jpg?2)。背景 画像のサイズは 1600*1600px (画像アドレス: http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg) です。

その後、非スケーリングの効果を実現するには 2 つの方法があります。背景画像の:

方法 1. 画像を背景として使用します

いくつかの CSS プロパティについて説明します。background-size: cover この CSS3 プロパティの機能は、背景画像を十分な大きさに拡張することです。背景画像が背景領域を完全に覆っていること。 背景画像 この属性を使用せずにブラウザをズームすると、背景画像がそれに応じて縮小されます。 -webkit-background-size: cover と -o-background を同時に使用します。 -size: cover は、Webkit カーネル ブラウザと Opera ブラウザと互換性があります。background-attachment 属性は、背景画像を固定するか、スクロールするかを設定します。ページの残りの部分を固定に設定すると、ページの残りの部分がスクロールしても背景画像は移動しません。

(Baidu の 1 つ上の星空マップ、エフェクト、スクリーンショットを使用):

Hhtml:

CSS:

使用される効果は、ブラウザのズームによって画像サイズは変わりませんが、縦スクロールバーがある場合、画像は固定されずスクロールバーに合わせて移動します。画像の幅を 100% に設定するだけです。

コードは非常にシンプルで、Baidu の星空マップを使用したわずか数行です:

HTML:

CSS: