Css 精灵图（雪碧图） 图片大小显示

时间：2021-08-18 20:31:59

Web 项目使用的JQuery框架，项目时间比较久了，图片积累下来，大概光图片就有一两百个，为了减少网络请求数量和加载时间，项目做一个统一的规整，将小图标全部放在精灵图（雪碧图）上。

两百多个小图标，对于UI设计师来说，应该也满多大，后来就在网上找了一个工具，可以把小图标整合在一个雪碧图图上。工具链接为：https://www.toptal.com/developers/css/sprite-generator

合成雪碧图之后 ，最重要 的工作来了，将项目中的引入jpg或者png 的地方，换成雪碧图的方式来进行修改。

在网上找了半天，也看了别的vue项目，但是不行。

vue项目中可以使用工具postcss 进行css的处理，最终的代码如下：

@define-mixin sprite $viw, $vih, $riw, $rih, $rix, $riy, $rpw: 452, $rph: 547 {
    width: bpcalc($viw);
    height: bpcalc($vih);
    background-image: url(../../../static/assets/csss.png);
    background-repeat: no-repeat;
    background-size: bpcalc(($viw * $rpw)/ $riw) bpcalc(($vih * $rph)/ $rih);
    background-position: -bpcalc(($viw * $rix) / $riw) -bpcalc(($vih * $riy)/$rih);

}，

对应的在JQuery 中，我没有找的可以使用这种工具。

只能苦逼逼的自己想办法处理了。

一开始不是特别理解意思，想着background-size对应的是图片在页面上的大小，结果完全不对，全部否认之前的认识，一切重新开始。

我专门写了一个对应的函数来处理处结果。函数如下：

/*  * $viw 页面上显示的宽度  * $vih 页面上显示的高度  * $riw 雪碧图上图标的宽度  * $rih 雪碧图上图标的高度  * $rix 雪碧图上图标的x轴坐标  * $riy 雪碧图上图标的y轴坐标  * $rpw 图片总宽度  * $rph 图片总高度 * */ function sprite($viw, $vih, $riw, $rih, $rix, $riy, $rpw, $rph){
    var w = $viw / $riw;
    var h = $vih / $rih;
    var bg_widsize = (w  * $rpw / 75).toFixed(2);
    var bg_heisize = (h * $rph / 75).toFixed(2);
    var bg_widposi = (w * $rix / 75).toFixed(2);
    var bg_heiposi = (h * $riy / 75).toFixed(2);
    Utils.Console.log('background-size:'+bg_widsize + 'rem ' + bg_heisize + 'rem;' + 'background-position:-' + bg_widposi + 'rem -' + bg_heiposi + 'rem;');
    return 'background-size:'+bg_widsize + 'rem ' + bg_heisize + 'rem;' + 'background-position:' + bg_widposi + 'rem ' + bg_heiposi + 'rem;';
}
对应的参数上面注释就有。

每一个对应的$rpw / 75类似，是将px转换成rem,不同的项目转换的不一样，也可以不转换，返回的结果用px接受。

举一个例子（单位为:px），假如一个图标iconA，在设计图上实际显示的大小是20*30，在雪碧图上大小实际是40*60，雪碧图的整体大小为1000*1000，实现原理是，先将雪碧图缩小，缩小倍数是宽：20/40，高30/60，对应的background-size的值时表示雪碧图整体的大小，background-position的值表示这个图标 在雪碧图上的坐标。


标签：

相关文章