html图片边角变,有效解决 css sprite 图片使用 rem 单位边角缺失的问题

起因

在移动端使用 rem 布局时 sprite 图片也需要用 rem 单位。

但由于浏览器对小数单位精度解析的差异，在不同设备上一些图片看起来会缺了一点点，或者多了一点点..

有哪些方案？

【百分比 background-position】

既然不能写固定单位，那么用百分比应该可以吧？

其实上面的截图正是用的百分比，网络上见到大多数也有提到这个方法，但博主的实践来看，并没有效果，或许是哪里没做好..

【提高数值精度】

浏览器没办法精确的处理小数，那么提高数值精度就好了吧。

例如原本 `23.12456rem` ,提高 100 倍, 写成 `2312.456rem` 这样浏览器解析就会准确多了。

下面提到的办法就是 【2】 的方案

怎么做？

思路

单位数值变大了，整体也会变得很大，需要缩小回原来的尺寸。

缩小尺寸可以使用 css 的 zoom，或者 transform scale，建议使用后者，原因可以看下最后的【参考文档】

小障碍

从图中可以看到，scale 的缩放并不会影响到布局

那么可以借助 伪元素 让要缩放的图片脱离文档流

编写代码

最后写下以下代码

.icon-my {

width: 2.13333rem;

height: 2.13333rem;

position: relative; /* 相对定位 */

}

.icon-my:after {

content: '';

width: 10000%; /* 放大100倍 */

height: 10000%;

position: absolute;

left: 0;

top: 0;

background: url(icon-index.png) no-repeat -245.33333rem 0; /* 单位尺寸放大100倍 */

background-size: 593.06667rem 458.66667rem;

transform-origin: 0 0; /* 不从中心点缩放 */

transform: scale(0.01); /* 缩放回原尺寸 */

}

一些别的研究

相对于维护麻烦的 css sprite，其实还有 Data URI(base64的方式)，而且不会遇到文章里想要解决的问题，推荐阅读【参考文档】里的资料

在 不远的将来 人们会逐渐用上 http2，借助 多路复用 的特性，不做 css sprite 看样子性能会更好。

据说缩放 100 倍，在移动页面上会导致严重性能问题，但博主暂时没试出来..

参考文档

github库

本文同时发布在 think2011的博客 2017-03-31 20:07:23