2011-10-31 6 views
2

私が代わりに彼らのメインページでは、Googleで検索し、私は彼らのロゴを見て、画像のパスをコピーしたときに、それがあることを示しています。Googleのロゴはどのようなものですか?

http://www.google.com/images/nav_logo91.png 

はまあ、それが唯一のロゴではない、それは多くを持っていますアイコンも同様です。 Googleがこのように使用する理由はありますか?結果を表示したり、技術スキルを紹介したりするためのものですか?また、どのように画像の一部のみを表示することができますか?ありがとう。

+0

CSSスプライトと呼ばれています。 – animuson

答えて

4

スプライトです。これにより、ファイルサイズと読み込み時間が短縮されます。

JavaScriptまたはCSS(より一般的なCSS)を使用して画像をスプライスすることができます。要素をdivタグで作成し、指定したURLにbackground-imageプロパティを設定します。次に、background-positionプロパティを使用して適切に配置します。最後に、divの予定widthheightを設定します。

2

CSSスプライトと呼ばれます。多くのWebサイトでは、このテクニックが使用されています。このテクニックでは、サイト上のすべての(装飾的な)画像が単一の画像に含まれています。

この単一の画像は、個々のすべての画像の合計よりもサイズが小さくなる傾向があります(各画像は独自のカラーテーブルを保持します)。また、サーバーから1つのイメージを取得することは、HTTPサーバー要求が少ないことを意味します。

大きな画像はdivの背景として配置され、background-positionと他のCSSプロパティを使用して操作され、スプライトの必要な部分だけが確実に表示されます。

2

animusonはすでに説明したように、CSSスプライトと呼ばれていますが、少し拡張すると余分なHTTPリクエストを防ぐために使用されます。

ロードするイメージを1つだけ持つことで、キャッシュされた後、ウェブサイトは複数の背景に対してそのイメージを使用できますが、バックグラウンドポジションを使用して特定の領域を表示可能にします。

良い説明はここにあります:http://css-tricks.com/158-css-sprites/

関連する問題