一种合并css 样式文件中背景图片的方法
【专利摘要】本发明涉及一种合并CSS样式文件中背景图片的方法，特别适用于需要优化大访问量网站页面的加载性能的情况，包括以下步骤：获取CSS文件的路径；打开CSS文件；根据CSS文件，获取所需合并图样式；根据合并图样式的URL，获取所述合并图样式中的合并图路径及单图路径；通过合并图路径和单图路径，获取图片，并将图片合并为新的合并图；保存新的合并图并更改其合并图样式；判断是否完成合并图的合并，如果是则保存合并图，打开下一个CSS文件，否则重新获取合并图，获取合并图样式。采用本发明的合并CSS样式文件中背景图片的方法，可减少加载图片对网页的http请求，从而提高页面的性能；更换风格方便，修改需要修改的图片后，能重新生成CSS样式文件，无需修改源码。
【专利说明】一种合并CSS样式文件中背景图片的方法
【技术领域】
[0001] 本发明涉及网络通信【技术领域】，更具体地说，涉及一种用于优化大访问量网站页 面的加载性能的合并CSS样式文件中背景图片的方法。
【背景技术】
[0002] 在对访问量较大地网站进行性能优化时，其中有一点是尽量减少http连接数，道 理很明了，减少了单个PV的http连接数，可以减少网络通信量，提高页面的响应速度，肯定 也可以增加单台服务器的用户负载数。
[0003] 在css网页样式文件中，一种常见的方法，合并Css小背景图，合并Css小背景图 这一点已经有很多大网站都在做，比如淘宝，百度贴吧，他们页面上看似有很多小的背景图 片，而实际上这些图片都被合并成了一张大图，然后用Css的Background-positioin属性 控制显示背景图片的位置，将多个小的背景图片合并成一张大图，通过减少了 http连接 数，以提升网站页面加载的性能。
[0004] 现有技术方案包括：
[0005] A、在CSS样式文件中直接书写
[0006] 1、在CSS样式源文件中将图片"icon_All. png"书写为以下样式
[0007] .χ-note-icon{height:16px ；width:16px ；background:url (/img/icon_All. png) Opx-Opx ；}
[0008] .χ-rss-icon{height:16px；width:16px ；background:url (/img/icon_AlI. png)0px-18px ；}
[0009] . χ-man-icon{height:16px；width:16px ；background:url (/img/icon_AlI. png)0px-34px ；}
[0010] 2、通过Background-positioin属性来控制需要显示的图片
[0011] B、CSS背景图片合并工具
[0012] Css背景图合并工具包含以下功能：
[0013] 1、添加了用鼠标拖动图片或者用方向键改变图片位置的功能
[0014] 2、可以设置整幅大图的生成类型，因为png文件在ie6下透明色的显示下有问 题；
[0015] 3、可以设定大图的背景色，默认为透明色
[0016] 4、可以在选中图片之后用" + "按钮添加更多的图片
[0017] 5、可以在选中图片之后，用按钮移除图片，或者直接用Delete键移除选中图 片
[0018] 6、生成好背景图片的同时还会生成一个CSS文件，其中包含了每个小图所对应的 CSS代码。
[0019] 现有技术的缺点在于：
[0020] 在CSS源文件中使用Background-positioin来定位图片，开发的时候比较麻烦， 要通过Photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么 难度，但是很繁琐；如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方 最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图 片，这样图片的字节就增加了，还要改动CSS样式文件。
[0021] CSS背景图片合并工具，虽然解决了使用Photoshop工具和测量工作，但是该工具 是首先成CSS样式文件然后再使用，但如果有修改则需要重新生成图片和样式，使用新的 CSS样式重新修改CSS样式文件源码。
【发明内容】
[0022] 本发明所要解决的技术问题是，针对现有的合并图计算方法过于复杂，更改其中 一幅图时，需要修改源码的缺陷，提供一种完整、方便的合并CSS样式文件中背景图片的方 法，用于减少了网页的http请求，从而大大的提高了页面的性能；更换风格方便，直接将需 要修改的图片修改后，再重新生成CSS样式文件，无需修改源码。
[0023] 本发明解决上述技术问题的技术方案如下：一种合并CSS样式文件中背景图片的 方法，包括以下步骤：110、获取CSS文件路径；120、打开CSS文件；130、根据CSS文件，获 取所需合并图样式；140、根据合并图样式的URL，获取所述合并图样式中的合并图路径以 及单图路径；150、通过合并图路径和单图路径，获取图片，并将图片合并为合并图；160、判 断图片是否存在另一合并图，如果是则转至步骤161，否则保存所述合并图，转至步骤170 ; 161、将所述另一合并图更改为所述合并图并保存，转至步骤170 ;170、根据保存后的合并 图，更改其合并图样式；180、判断是否完成合并图的合并，如果是则转至步骤181，否则转 至步骤130 ;181、保存所述合并图，转至步骤120。
[0024] 优选的，所述合并图路径为单图路径合并后形成的合并图路径。
[0025] 优选的，更改合并图的合并图样式是将合并图的路径嵌入至合并图样式的URL之 中。
[0026] 优选的，所述合并图样式可自行设置。
[0027] 优选的，所述合并图样式的设置步骤包括：
[0028] a、设置合并图的高度；
[0029] b、设置合并图的宽度；
[0030] 优选的，所述合并图更改单图时，通过更改合并图路径中的单图路径实现。
[0031] 优选的，所述合并图路径设置有云存储服务器的IP以及端口，用于存储合并图。
[0032] 优选的，所述合并图样式的设置还包括设置合并图的路径，以便所述单图路径的 随时更改。
[0033] 优选的，所述CSS文件与下一个CSS文件之间设置有文件路径的连接。
[0034] 实施本发明的合并CSS样式文件中的背景图片的方法，具有以下有益效果：减少 了网页的http的访问链接数，从而大大的提高了页面的响应性能，不需要专业的工具制作 合并图；在更新图片的情况下，直接将需要修改的图片修改后，再重新生成CSS样式文件， 无需修改源码。
【专利附图】
【附图说明】
[0035] 图1为本发明的合并CSS样式文件中的背景图片的方法的第一优选实施例的流程 图；
[0036] 图2为本发明的合并CSS样式文件中的背景图片的方法的第一优选实施例的样例 代码合并图的流程图；
[0037] 图3为本发明的合并CSS样式文件中背景图片的方法的第二优选实施例的流程 图；
[0038] 图4为本发明的合并CSS样式文件中的背景图片的方法的第一优选或第二优选实 施例的合并图样式的设置流程图。
【具体实施方式】
[0039] 为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对 本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不 用于限定本发明。
[0040] 如图1所示，在本发明的合并CSS样式文件中背景图片的方法的第一优选实施例 的流程图中，所述合并CSS样式文件中背景图片的方法开始于步骤100 :步骤100之后进 行到步骤110,获取CSS文件路径；随后，到下一步骤120,打开CSS文件；随后，到下一步骤 130,根据CSS文件，获取所需合并图样式；随后，到下一步骤140,根据合并图样式的URL，获 取所述合并图样式中的合并图路径以及单图路径；随后，到下一步骤150,通过合并图路径 和单图路径，获取图片，并将图片合并为新的合并图；随后，到下一步骤160,判断图片是否 存在另一合并图，如果是则转至步骤161，否则将保存所述合并图；随后，到下一步骤170， 根据保存后的合并图，更改其合并图样式；随后，到下一步骤180,判断是否完成合并图的 合并，如果是则转至步骤181，否则转至步骤130 ;所述步骤161为将所述另一合并图更改为 所述合并图并保存，转至步骤170 ;所述步骤181为保存所述合并图，转至步骤120 ;最后该 方法结束于步骤190。
[0041] 优选的，所述合并图路径为单图路径合并后形成的合并图路径。
[0042] 优选的，更改合并图的合并图样式是将合并图的路径嵌入至合并图样式的URL之 中。
[0043] 优选的，所述合并图样式可自行设置。
[0044] 优选的，所述合并图更改单图时，通过更改合并图路径中的单图路径实现。
[0045] 优选的，所述合并图路径设置有云存储服务器的IP以及端口，用于存储合并图。
[0046] 优选的，所述CSS文件与下一个CSS文件之间设置有文件路径的连接。
[0047] 优选的，所述合并图路径设置有云存储服务器的IP以及端口。
[0048] 所述云存储服务器，用于存储合并图。
[0049] 本合并CSS样式文件中的背景图片的方法提取网页中所需图片路径的信息，并将 该类信息合并为一条合并图路径，减少打开网页读取大量图片信息的链接数，在合并图路 径中，各个图片又是相互独立存在，方便在对任意图片进行修改时，而不影响到其他图片的 重新计算与整理，采用本发明的合并CSS样式文件中的背景图片的方法可快捷、方便的提 高访问量较高的网站中大量图片的读取问题，进一步减少了图片的链接数，优化了网页页 面的响应性能，并通过不同图片统一管理的方法，实现不同图片中任意图片修改都无需修 改，合并图的样式格式。
[0050] 如图2所示，在本发明的合并CSS样式文件中的背景图片的方法的第一优选实施 例的流程图中，本优选实施例与第一优选实施例区别在于采用样例代码对实施例进行进一 步的补充，所述合并CSS样式文件中背景图片的方法开始于步骤1 :步骤1之后进行到步骤 2,获取CSS文件路径；随后，到下一步骤3,打开CSS文件；随后，到下一步骤4,根据CSS文 件，获取所需合并图样式；随后，到下一步骤5,根据合并图样式的URL，获取所述合并图样 式中的合并前的图片路径；随后，到下一步骤6,判断是否存在Iocn_all. png的合并图片， 如果是则转至步骤7,否则转至步骤8 ;步骤7,修改Iocn_all. png合并图片，将步骤5中的 图片合并到I〇cn_all. png中，随后转至步骤9 ;步骤8,将步骤5中的图片保存为Iocn_all. png，随后转至步骤9 ;步骤9,根据合并图片在Iocn_all. png生成的路径修改合并图样式； 随后，到下一步骤10,判断是否完成所有图片的合并，如果是则转至步骤11，否则转至步骤 4 ;步骤11，保存修改后的CSS文件，并进行下一个CSS文件，即转至步骤3 ;最后该方法结束 于步骤12。
[0051] 本发明的合并CSS样式文件中的背景图片的方法中CSS文件的合并图样式中，图 片背景按单个图片方式书写，但将背景图片使用注释方式在其前后加上需要合并的背景样 式，以下代码表示将· x_note_icon、· x-rss-icon、· x-man-icon三个样式中的背景图片合 并为 icon_All. png 图片。
[0052]
【权利要求】
1. 一种合并css样式文件中背景图片的方法，其特征在于，包括以下步骤： 110、获取CSS文件路径； 120、打开CSS文件； 130、根据CSS文件，获取所需合并图样式； 140、根据合并图样式的URL，获取所述合并图样式中的合并图路径以及单图路径； 150、通过合并图路径和单图路径，获取图片，并将图片合并为合并图； 160、 判断图片是否存在另一合并图，如果是则转至步骤161，否则保存所述合并图，转 至步骤170 ; 161、 将所述另一合并图更改为所述合并图并保存，转至步骤170 ; 170、根据保存后的合并图，更改其合并图样式； 180、 判断是否完成合并图的合并，如果是则转至步骤181，否则转至步骤130 ; 181、 保存所述合并图，转至步骤120。
2. 根据权利要求1所述的合并CSS样式文件中背景图片的方法，其特征在于，所述合并 图路径为单图路径合并后形成的合并图路径。
3. 根据权利要求1所述的合并CSS样式文件中背景图片的方法，其特征在于，所述步 骤160中，更改合并图的合并图样式是将合并图的路径嵌入至合并图样式的URL之中。
4. 根据权利要求1所述的合并CSS样式文件中背景图片的方法，其特征在于，所述合并 图样式可自行设置。
5. 根据权利要求1所述的合并CSS样式文件中背景图片的方法，其特征在于，所述合并 图样式的设置步骤包括： a、 设置合并图的高度； b、 设置合并图的宽度。
6. 根据权利要求1所述的合并CSS样式文件中背景图片的方法，其特征在于，所述合并 图更改单图时，通过更改合并图路径中的单图路径实现。
7. 根据权利要求1所述的合并CSS样式文件中背景图片的方法，其特征在于，所述合并 图路径设置有云存储服务器的IP以及端口，用于存储合并图。
8. 根据权利要求5所述的合并CSS样式文件中背景图片的方法，其特征在于，所述合并 图样式的设置还包括设置合并图的路径，以便所述单图路径的随时更改。
9. 根据权利要求5所述的合并CSS样式文件中背景图片的方法，其特征在于，所述CSS 文件与下一个CSS文件之间设置有文件路径的连接。
【文档编号】G06F17/30GK104516971SQ201410822642
【公开日】2015年4月15日 申请日期:2014年12月25日 优先权日:2014年12月25日
【发明者】张伟 申请人:深圳联友科技有限公司