PSpriter之CSS Sprites 进入全屏
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)
*
*/
* 在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)
*
*/