不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
PSpriter之CSS Sprites 进入全屏
line

PSpriter一开始的目标,就是这个:Css Sprites。

简介:

/**
* 在CSS中,将小图合并,并用大图替换原来的小图,修正或添加background-position
*
* 1、如果background-repeat:repeat | repeat-x | repeat-y
*           则不进行小图合并
* 2、如果background-position:right bottom 或 x、y其中一个为center
*           则不进行小图合并
* 3、如果background-position:left bottom 或 -10px bottom
*           则进行水平方向合并,并将小图底对齐,保留bottom定位,修正position-x
* 4、如果background-position:right top 或 right -10px
*           则进行垂直方向合并,并将小图右对齐,保留right定位,修正position-y
* 5、如果background-position:left top 或 -10px -10px等
*           则进行混合模式合并,同时修正position-x和position-y
* 6、强制不进行图片合并的,可以在图片后加参数:sprite=0
*           backgrouond:url(/static/qbase/img/icon.png?sprite=0) no-repeat;    
*
* @remark
*           如果要使用CSS Sprites功能,必须保证在你的CSS中所有背景图片都是未经过合并的小图
*        
* @example
*           // 导入类库
*           include_once('CssSprites.class.php');
*           // 需要进行布局的矩阵列
*           $cssfiles = array(
*                   array(
*                        'css' => '/home/zhaoxianlie/pspriter/css/index.css',
*                        'cfg' => array(
*                             'type' => 'png,gif',
*                             'margin' => 5
*                        )
*                   )
*               );
*           // 布局所需配置
*           $options = array(
*                   'output' => '大图输出目录,如果未指定,会默认为:/img/sprite'
*                );
*           // 创建图片合并的实例
*           $csssprites_instance = new CssSprites();
*           // 图片合并
*           $csssprites_instance->run($cssfiles,$options);
*          
*          
* @author zhaoxianlie (admin@baidufe.com)
*
*/
趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line