Css スプライト画像は画像サイズを比例的に拡大縮小します (背景サイズはスプライト画像の表示を最適化します)_html/css_WEB-ITnose

プロジェクトの開発プロセスで CSS スプライトが使用され、ターゲットのスタイル サイズがアイコンとして 32px * 23px サイズの画像であるという要件がありました。 写真に示すように:

ただし、私に与えられた背景画像は次のような画像です、256px * 46px:

この例では、下部メニューのサイズ 32px * 23px を使用し、通常の表示デバイスで画像を表示できるように、この画像を半分に縮小しています。

元の CSS スタイルでは、以下に示すように、デフォルト値がすべて「0」であるため、background-position 属性値を設定する必要はありません。 >

.x-navbar [class^='x-icon-'] {background-image: url(img/icon_navbar_new_year.png);width: 32px;height: 23px;} 

したがって、最も重要な問題は、background-size 属性値を何に設定すべきかをどうやって知るかということです。

式は次のとおりです:

高解像度画像の幅/ターゲット画像の幅 = X
元のスプライト画像の幅/x = 背景サイズの幅の値

私たちの高解像度レートの下のアイコンは 256px x 46px;

ターゲット画像の幅は "64px";
スプライト画像の合計幅は "256px" です

前の式によると、

64/32 = 2
256/2 = 128
最後に一つ。背景画像の幅の値のみを計算して、背景画像が適切に拡大縮小されるように、「高さ」の値を「自動」に設定しました。もちろん、対応する値を設定することもできます（背景サイザーの幅を自動に設定し、高さを特定の値に設定する）が、幅を設定する方が簡単だと思います。

.x-navbar [class^='x-icon-'] {    background-size: 128px auto;}

次に、画像の位置座標に従って表示されます。

.x-icon-shouye {background-position: 0 0;}.x-icon-dingdan {background-position: -32px 0;}.x-icon-gouwuche {background-position: -64px 0;}.x-icon-gengduo {background-position: -96px 0;}

このようにして、画像の効果が得られます。