6

通常、CSS スプライトを作成する場合、すべてのスプライトを間隔をあけずに並べます。たとえば、すべての画像が 10x10 ピクセルの場合、座標 0,10 に配置します。0,20; 10,10; 10,20。

しかし、これは特定の状況で問題を引き起こすようです。たとえば、ページのズーム中やモバイルでは、次のスプライトの端が表示されます。

この問題が発生するのはなぜですか。丸め誤差と関係がありますか? 問題を回避する最善の方法は、単にスプライトの周りにスペースを追加することですか? もしそうなら、スプライト画像のアイコン間に必要な最小または推奨の間隔はありますか?

4

2 に答える 2

4

特に IE では、丸めが原因でズーム時にスプライト ブリードが発生する場合があります (古いバージョンでは単純に最も近い整数に丸められます。たとえば、 の計算値は20.343pxとしてレンダリングされます20px)。
丸め誤差が よりも大きくなることはないため、すべての辺1pxに のパディングを使用すると、1pxすでにその問題を修正できます。

最近のブラウザは、サブピクセル レンダリングと呼ばれる方法を使用して、この問題を軽減しています。

于 2012-10-17T16:12:13.473 に答える
0

50pxx50pxまたは100pxx100pxのボックスに保存されたCSSスプライトを維持する方が簡単です。

  • スプライトで関連する画像を整理するのに役立ちます。
  • 以前のスタイルをコピーして貼り付け、新しいスタイルに1桁だけ変更できます。
  • 完全なピクセル位置を手動で見つける必要はありません。
  • また、html要素の幅/高さを制御できず、スプライト画像の他の意図しない部分が表示されるという問題のあるケースも回避できます。

例えば：

div.test {
    background-image: url(image.png);
    background-position: 100px 0px;
}
div.test:hover {
    background-position: 100px 100px; /* Simple relation with previous style */
}

div.box1 {
    background-image: url(image.png);
    background-position: 200px 0px;
}
div.box2 {
    background-image: url(image.png);
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */
}
于 2013-01-01T07:10:25.660 に答える