7

cssイメージスプライトを使用する唯一の利点は、httpリクエストが少ないことですか？

または他の利点はありますか？

また、スプライトのどの領域を表示するかを間引く簡単な方法はありますか？

4

5 に答える 5

15

あなたが言ったように、主な利点の1つは、サーバーへの要求の数を減らし、応答時間を改善することです（特に、大量の小さな画像をロードしている場合）。しかし、これが人々がスプライトを使用する唯一の理由ではありません。

「マウスオーバー」表示にスプライトを使用しない場合、ユーザーは画像が一瞬消えるのを見るでしょう...そしてそれは本当にひどく見えます。これは、スプライトを移動するだけでなく画像を変更すると、新しい画像が読み込まれ、読み込み時間がエンドユーザーに表示される可能性があるためです。

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

スプライトのもう1つの利点は、すべての画像を1つの場所に保持できることです。場合によっては、より理にかなっています（メニューなど）。

スプライトのどの領域を表示するかを決定するには、フォトショップまたはその他の画像編集ソフトウェアを使用するだけです。

于 2009-08-17T17:42:13.280 に答える
4

主な利点は、主にHTTPリクエストが減少するため、ページの読み込みが速くなることです。

ツールを使用してスプライトを生成できます。

免責事項-私はこのツールを書きました。

于 2009-08-17T17:49:41.207 に答える
0

同じクロスブラウザで画像の配置（特にテキストの横）を取得する方がはるかに簡単です。垂直方向の配置とパディングを使用せずに、画像を上下左右に調整できます。

1つのファイルにある場合は、すべての画像を追跡する方が簡単です。特に私は通常透明なpng画像を持っているので、ie6にはgif画像を使用します。pngスプライトマップをgifとして保存し、ie6 cssにbackground-imageを含む1行を追加すると、画像が切り替わります。

フォトショップまたはgimpを使用してスプライトマップのおおよその位置を取得し、Firefoxを使用して配置を微調整します。

于 2009-08-17T17:50:52.343 に答える
0

はい、別の利点があります。すべての画像ファイルには、画像の種類や色などを説明する独自のヘッダーがあります。したがって、画像を1つのスプライトに結合すると、いくつかのkbを獲得できます。

しかし、前に言ったように、ほとんどの場合、HTTPリクエストの数を減らすことで勝ちます。

于 2009-08-17T18:07:05.510 に答える
0

表示する領域を決定するという点では、通常、要素を100の倍数のピクセルに配置します。したがって、64x64ピクセルのアイコンがたくさんあるスプライトがある場合は、通常、（0、100）、（ 0、200）、（0、300）など。

このように、すべての背景位置プロパティを設定するときに、正確な測定値（またはその他の開発者）を入力してキーストロークを保存する必要はありません。

于 2009-08-17T19:12:56.530 に答える