一聚教程网:一个值得你收藏的教程网站

热门教程

CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)

时间:2022-06-25 09:31:17 编辑:袖梨 来源:一聚教程网

我去,这个标题好长,想了半天还是这么个大长标题。其实本文的内容简单来说就是在 Retina 屏幕下,一般的图片会显得不清晰,所以我们就要 2X 的图片来缩放到 50%(因为物理分辨率不会变)来保证清晰度。后来出现的字体图标解决了 2X 放大的问题,但是一些复杂的图片还是无法用字体图标代替,于是我们又回到了 2X 图片的问题。2X 图片多了之后又会影响加载速度,在普通图片的时候我们可以用 CSS Sprites 比较完美的解决,但一张图片放好几个 2X 图片定位坐标的时候又会有一个缩放的问题,本文的重点就是解决这个问题。

实例图片

首先来看一下例子图片:

bgbk.org-20140324_1
这里要说明图片的背景是透明的,白色是我为了方便大家识别填充进去的~
图片为八个大小完全一样的 2X 图片无缝的拼进去的。

缩放尺寸

这里就是本文的关键所在了,图片是需要进行缩放才能放进去的,原来单一的图片的时候我们直接用 CSS 的 background-size:50% 即可,但现在却不管用了,因为现在的 50% 实际是下图的样子:

bgbk.org-20140324_2

那该怎么办呢?很简单。

首先,如果你的图标尺寸不一请把每个图标的空间都按最大的那个摆好,然后把原始图标放在左上角:

bgbk.org-20140324_3

并且必须确保每个图片的空间都是正方形(注意是空间,不是图片具体大小),然后记住每个空间的边长。

把 CSS 的 background-size 调整成 X00%,其中 X 为图标数量较多的一列的图标数量。
列如上边的演示,每横排有四个图标,每竖排有两个图标,取较多的横排,所以 X 为4background-size 即为 400%

调用尺寸

缩放完毕就该调用了。列如调用上图的第一行第二列的 “分类黑色” 图标,它在上图的尺寸为 102px,但我想让他显示的物理分辨率为 44px,那好,首先弄一个标签,长宽为 44px,坐标(background-position)即为 44px(X 轴)和 0(Y 轴)。

这样就很完美的显示出来了,解决了 Retina 下雪碧图(CSS Sprites)的小尴尬。

热门栏目