CSS Sprite画像のぼやけ解消

質問

CSS Spriteを作成し、その画像をチェックしてもきれいでした。
ところがコードを書いて表示してみるとぼやけます。
このぼやけを解消する方法を教えてください。

.sprite,.icon2,.icon3,.icon4,.icon5{background:url('../../icon/icon1.png');background-repeat:no-repeat;}.icon2{background-position:0 0;}.icon3{background-position:0 -30px;}.icon4{background-position:0 -60px;}.icon5{background-position:0 -90px;}

回答No.5

retorofan

No.1です。
質問者様のHTMLソースもしくは実情が不明なため、
これ以上は対応困難に存じます。

GitHub等にて問題解決を図られては如何ですか？

回答No.4

retorofan

No.1です。

画像が小さくなってしまう問題を解決するために、
以下の対策を試してみてください。

「sprite」クラスに、次のいずれかを加えてみる

１．background-size: contain; /* または cover */
あるいは、
２．image-rendering: auto; /* または smooth */
ほかには、
３．filterプロパティを使用して画像のシャープネスを調整する
filter: blur(0.5px); /* ぼやけ具合を調整 */

補足

いずれも効果なしです。

回答No.3

retorofan

No.1です。

ドット絵のようになってしまった原因は、
image-rendering: crisp-edges や image-rendering: pixelated を使用すると、
画像のピクセルがそのまま表示されるためです。

これにより、画像がシャープになりますが、ドット絵のような見た目になることがあります。

「image-rendering」の適用は、はやめましょう！

[対策] この問題を解決するための対策を２つ提案します。

１．高解像度の画像を使用すると、ぼやけを防ぐことができます。

CSS　sample
.sprite {
background: url('../../images/sample.png'); /* あなたの画像アドレス */
background-size: 50% 50%; /* 画像のサイズを半分に縮小 */
}

２．CSSのスケーリングを調整すると不具合が解消されることがあります。

CSS　sample
.sprite {
transform: scale(0.5);
transform-origin: top left;
}

上記は、もちろん１つの「sprite クラス」にまとめてもよいです。

補足

いずれの方法も画像が小さくなるためだめでした。

回答No.2

retorofan

No.1です。
それでは、次の手を打ってみたらどうでしょう。
２つのアプローチを提案します。

[1] CSS「image-rendering」プロパティを使用して、
　画像のレンダリング方法を指定します。
　例えば、以下のように指定します。
.sprite {
image-rendering: crisp-edges; /* または pixelated */
}

[2] 画像のフォーマットを確認する
　PNG形式の画像を使用しているか確認してください。
　JPEG形式の画像は圧縮によってぼやけることがあります。

補足

変化はしたのですが、きれいというかドット絵のようになりました。

回答No.1

retorofan

スケーリングされると、ぼやけることがあります。
background-sizeプロパティを使用して、
スプライト画像のサイズを指定してみてください。

例示すると、以下のように記述すればいいです。
.sprite {
width: 30px;
height: 30px;
background-size: 30px 60px; /* スプライト全体のサイズ */
}

補足

やってみたのですがだめでした。
何も変化はありませんでした。