CSS スプライト テクノロジー 10 日間で Web 標準を学ぶ (div+css)_html/css_WEB-ITnose

CSS スプライトは、中国では多くの人々に css スプライトまたは css スプライトと呼ばれています。 Web ページ内のいくつかの背景画像を画像ファイルに統合し、CSS 背景画像を使用して表示される場所に配置します。これにより、ファイル サイズが削減され、サーバーへのリクエストの数が減り、効率が向上します。

CSS スプライトについて話す前に、まず背景画像について説明しましょう

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat }

CSS の背景属性は次のように省略されます。上記の表示では、#ccc は背景色を表し、次の 2 つの数値パラメータはそれぞれ左と右と上と下であり、2 番目のパラメータは左からの距離を px で表します。は上からの距離を表します。paddingの略称とは異なりますので混同しないように注意してください。さらに、CSS 値 0 には単位が必要ではなく、他の値には単位が必要であることを強調したいと思います (line-height 値が複数の場合、zoom と z-index を除く) ; no-repeat は、背景画像が繰り返されない方向を示します。

画像を配置するためのパラメーターは、画像の左上隅を原点に基づいていることに注意してください。これらを理解すると、基本的に CSS スプライト技術を理解できるようになります