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

<!-- Author:博客园小dee -->

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:

<div id="con"></div>

CSS:

 1 body{ margin:0; padding:0;} 2 #con{  3  4     position:absolute; 5     top:0; 6     left:0; 7     height:100%; 8     width:100%; 9     background-image:url("maskimg/star.jpg"); 10     background-position: center 0;11     background-repeat: no-repeat;12     background-attachment:fixed;13     background-size: cover;14     -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */15     -o-background-size: cover;/* 兼容Opera */16     zoom: 1;    17 }