この手法の名前は CSS スプライトと呼ばれます。基本原理は、CSS で画像の背景シリーズの background-image、background-repeat、background-position などの属性を使用することです。このように画像表示を高速化する鍵となるのは、重量を軽くすることではなく、枚数を減らすことです。通常の状況では、画像の送信時間はリクエストの待ち時間よりもはるかに短いのが通常です。
追記: 3 つの CSS スプライトのサンプルのデモが特別に作成されましたので、興味のある方はご覧ください。
例
たとえば、google.cn の現在のホームページの下部ナビゲーションもこの方法で実装されています。
使用されている画像: http://www.ccvita.com/wp-content/uploads/demo/css/google.gif
効果: http://www.google.cn
コード
見つけましたインターネットから いくつかのデモがあり、次のアドレスでデモをご覧いただけます: CSS スプライトのサンプル デモ
効果 1: 垂直背景画像
効果 2: 水平背景画像
効果 3: スムーズな投票
転載元: http://www.ccvita.com/322.html#more-322