怎样解决 CSS Sprite 在高分屏（ Retina）下显示模糊的问题？

[cstome]

自己的网站小图标有点多，做成了 CSS Sprite ，但是发现在手机上显示模糊，现在的手机都是高分屏。 找了好久都没找到解决方案。

BTW ，问一下要怎样才能系统的学习前端啊。自己现在学习前端有一些时间了，做了几个个人项目，但每次都会发现一些坑，花好长时间去搜索，虽然每次都有收获。 本人电子信息专业大一，课程有 C 、 Java 、嵌入式，但个人对前端比较感兴趣，求系统学习前端方法。

[viko16]

不妨了解一下 SVG Sprite

[cstome]

@viko16 SVG Sprite 之前也折腾了很久，也没弄成。求推荐教程。

[morethansean]

用分辨率更高的图片啊

[yyfearth]

用一个 sprite@2x 的图片就好了啊
然后 css 里面用 media query 把这个图片应用到 retina 的环境里面并且设置 background-size

[kkzxak47]

分辨率啊，要么图片本身分辨率够高，要么矢量图

[Krime]

不是说 github 早都换成 inline 的 svg 了吗？

[viko16]

@cstome

理解的话可以看看这篇
https://css-tricks.com/svg-sprites-use-better-icon-fonts/

直接用的话可以到这个站找找
https://icomoon.io/

工具的话，就得自己找了

[newbieo0O]

SVG 、 Font 。 Sprite 已经很少用了。

[pein]

两倍大小缩成一倍就清楚

[cstome]

@yyfearth background-size 要怎么设，我设置后是整张 sprite 缩小成我设置的尺寸。