CN104516971A - 一种合并css 样式文件中背景图片的方法 - Google Patents
一种合并css 样式文件中背景图片的方法 Download PDFInfo
- Publication number
- CN104516971A CN104516971A CN201410822642.XA CN201410822642A CN104516971A CN 104516971 A CN104516971 A CN 104516971A CN 201410822642 A CN201410822642 A CN 201410822642A CN 104516971 A CN104516971 A CN 104516971A
- Authority
- CN
- China
- Prior art keywords
- merging
- css
- picture
- path
- pattern
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及一种合并CSS样式文件中背景图片的方法，特别适用于需要优化大访问量网站页面的加载性能的情况，包括以下步骤：获取CSS文件的路径；打开CSS文件；根据CSS文件，获取所需合并图样式；根据合并图样式的URL，获取所述合并图样式中的合并图路径及单图路径；通过合并图路径和单图路径，获取图片，并将图片合并为新的合并图；保存新的合并图并更改其合并图样式；判断是否完成合并图的合并，如果是则保存合并图，打开下一个CSS文件，否则重新获取合并图，获取合并图样式。采用本发明的合并CSS样式文件中背景图片的方法，可减少加载图片对网页的http请求，从而提高页面的性能；更换风格方便，修改需要修改的图片后，能重新生成CSS样式文件，无需修改源码。
Description
技术领域
本发明涉及网络通信技术领域，更具体地说，涉及一种用于优化大访问量网站页面的加载性能的合并CSS样式文件中背景图片的方法。
背景技术
在对访问量较大地网站进行性能优化时，其中有一点是尽量减少http连接数，道理很明了，减少了单个PV的http连接数，可以减少网络通信量，提高页面的响应速度，肯定也可以增加单台服务器的用户负载数。
在css网页样式文件中，一种常见的方法，合并Css小背景图，合并Css小背景图这一点已经有很多大网站都在做，比如淘宝，百度贴吧，他们页面上看似有很多小的背景图片，而实际上这些图片都被合并成了一张大图，然后用Css的Background-positioin属性控制显示背景图片的位置，将多个小的背景图片合并成一张大图，通过减少了http连接数，以提升网站页面加载的性能。
现有技术方案包括：
A、在CSS样式文件中直接书写
1、在CSS样式源文件中将图片“icon_All.png”书写为以下样式
.x-note-icon{height:16px；width:16px；background:url(/img/icon_All.png)0px-0px；}
.x-rss-icon{height:16px；width:16px；background:url(/img/icon_All.png)0px-18px；}
.x-man-icon{height:16px；width:16px；background:url(/img/icon_All.png)0px-34px；}
2、通过Background-positioin属性来控制需要显示的图片
B、CSS背景图片合并工具
Css背景图合并工具包含以下功能：
1、添加了用鼠标拖动图片或者用方向键改变图片位置的功能
2、可以设置整幅大图的生成类型，因为png文件在ie6下透明色的显示下有问题；
3、可以设定大图的背景色，默认为透明色
4、可以在选中图片之后用“+”按钮添加更多的图片
5、可以在选中图片之后，用“-”按钮移除图片，或者直接用Delete键移除选中图片
6、生成好背景图片的同时还会生成一个CSS文件，其中包含了每个小图所对应的CSS代码。
现有技术的缺点在于：
在CSS源文件中使用Background-positioin来定位图片，开发的时候比较麻烦，要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能(最好)往下加图片，这样图片的字节就增加了，还要改动css样式文件。
CSS背景图片合并工具，虽然解决了使用Photoshop工具和测量工作，但是该工具是首先成CSS样式文件然后再使用，但如果有修改则需要重新生成图片和样式，使用新的CSS样式重新修改CSS样式文件源码。
发明内容
本发明所要解决的技术问题是，针对现有的合并图计算方法过于复杂，更改其中一幅图时，需要修改源码的缺陷，提供一种完整、方便的合并CSS样式文件中背景图片的方法，用于减少了网页的http请求，从而大大的提高了页面的性能；更换风格方便，直接将需要修改的图片修改后，再重新生成CSS样式文件，无需修改源码。
本发明解决上述技术问题的技术方案如下：一种合并CSS样式文件中背景图片的方法，包括以下步骤：110、获取CSS文件路径；120、打开CSS文件；130、根据CSS文件，获取所需合并图样式；140、根据合并图样式的URL，获取所述合并图样式中的合并图路径以及单图路径；150、通过合并图路径和单图路径，获取图片，并将图片合并为合并图；160、判断图片是否存在另一合并图，如果是则转至步骤161，否则保存所述合并图，转至步骤170；161、将所述另一合并图更改为所述合并图并保存，转至步骤170；170、根据保存后的合并图，更改其合并图样式；180、判断是否完成合并图的合并，如果是则转至步骤181，否则转至步骤130；181、保存所述合并图，转至步骤120。
优选的，所述合并图路径为单图路径合并后形成的合并图路径。
优选的，更改合并图的合并图样式是将合并图的路径嵌入至合并图样式的URL之中。
优选的，所述合并图样式可自行设置。
优选的，所述合并图样式的设置步骤包括：
a、设置合并图的高度；
b、设置合并图的宽度；
优选的，所述合并图更改单图时，通过更改合并图路径中的单图路径实现。
优选的，所述合并图路径设置有云存储服务器的IP以及端口，用于存储合并图。
优选的，所述合并图样式的设置还包括设置合并图的路径，以便所述单图路径的随时更改。
优选的，所述CSS文件与下一个CSS文件之间设置有文件路径的连接。
实施本发明的合并CSS样式文件中的背景图片的方法，具有以下有益效果：减少了网页的http的***数，从而大大的提高了页面的响应性能，不需要专业的工具制作合并图；在更新图片的情况下，直接将需要修改的图片修改后，再重新生成CSS样式文件，无需修改源码。
附图说明
图1为本发明的合并CSS样式文件中的背景图片的方法的第一优选实施例的流程图；
图2为本发明的合并CSS样式文件中的背景图片的方法的第一优选实施例的样例代码合并图的流程图；
图3为本发明的合并CSS样式文件中背景图片的方法的第二优选实施例的流程图；
图4为本发明的合并CSS样式文件中的背景图片的方法的第一优选或第二优选实施例的合并图样式的设置流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
如图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。
优选的，所述合并图路径为单图路径合并后形成的合并图路径。
优选的，更改合并图的合并图样式是将合并图的路径嵌入至合并图样式的URL之中。
优选的，所述合并图样式可自行设置。
优选的，所述合并图更改单图时，通过更改合并图路径中的单图路径实现。
优选的，所述合并图路径设置有云存储服务器的IP以及端口，用于存储合并图。
优选的，所述CSS文件与下一个CSS文件之间设置有文件路径的连接。
优选的，所述合并图路径设置有云存储服务器的IP以及端口。
所述云存储服务器，用于存储合并图。
本合并CSS样式文件中的背景图片的方法提取网页中所需图片路径的信息，并将该类信息合并为一条合并图路径，减少打开网页读取大量图片信息的链接数，在合并图路径中，各个图片又是相互独立存在，方便在对任意图片进行修改时，而不影响到其他图片的重新计算与整理，采用本发明的合并CSS样式文件中的背景图片的方法可快捷、方便的提高访问量较高的网站中大量图片的读取问题，进一步减少了图片的链接数，优化了网页页面的响应性能，并通过不同图片统一管理的方法，实现不同图片中任意图片修改都无需修改,合并图的样式格式。
如图2所示，在本发明的合并CSS样式文件中的背景图片的方法的第一优选实施例的流程图中，本优选实施例与第一优选实施例区别在于采用样例代码对实施例进行进一步的补充，所述合并CSS样式文件中背景图片的方法开始于步骤1：步骤1之后进行到步骤2，获取CSS文件路径；随后，到下一步骤3，打开CSS文件；随后，到下一步骤4，根据CSS文件，获取所需合并图样式；随后，到下一步骤5，根据合并图样式的URL，获取所述合并图样式中的合并前的图片路径；随后，到下一步骤6，判断是否存在Iocn_all.png的合并图片，如果是则转至步骤7，否则转至步骤8；步骤7，修改Iocn_all.png合并图片，将步骤5中的图片合并到Iocn_all.png中，随后转至步骤9；步骤8，将步骤5中的图片保存为Iocn_all.png，随后转至步骤9；步骤9，根据合并图片在Iocn_all.png生成的路径修改合并图样式；随后，到下一步骤10，判断是否完成所有图片的合并，如果是则转至步骤11，否则转至步骤4；步骤11，保存修改后的CSS文件，并进行下一个CSS文件，即转至步骤3；最后该方法结束于步骤12。
本发明的合并CSS样式文件中的背景图片的方法中CSS文件的合并图样式中，图片背景按单个图片方式书写，但将背景图片使用注释方式在其前后加上需要合并的背景样式，以下代码表示将.x-note-icon、.x-rss-icon、.x-man-icon三个样式中的背景图片合并为icon_All.png图片。
在图片合并后网站实际运行的CSS文件的合并图样式的代码为：
本合并CSS样式文件中的背景图片的方法，通过更改图片的URL，修改合并图片的样式，实现直接将需要修改的图片修改后，再重新生成CSS样式文件，无需修改源码的功能。
如图3所示，在本发明的合并CSS样式文件中背景图片的方法的第二优选实施例的流程图中，所述合并CSS样式文件中背景图片的方法开始于步骤200：步骤200之后进行到步骤210，获取数据库中的合并图样式；随后，到下一步骤220，根据所需合并图的样式，将背景图片合并成合并图，并将其嵌入至合并图的样式之中；随后，到下一步骤230，根据获得的合并图的样式保存合并图的路径，最后该方法结束于步骤240。本合并CSS样式文件中背景图片的方法通过向数据库实时提取合并图样式，根据需要添加新的背景图片时，通过合并背景图为一张合并图，减少合并图样式对各个图片的分别读取，减少网页页面的图片读取问题，优化了网页页面对图片的处理与响应问题。
如图4所示，在本发明的合并CSS样式文件中的背景图片的方法第一优选实施例的步骤130的图片合并样式的格式流程图中，所述合并CSS样式文件中的背景图片的方法的步骤130开始于步骤300；步骤300之后进行步骤310，设置合并图的高度；随后，到下一步骤320，设置合并图的宽度；随后，到下一步骤，设置合并图的路径；随后，到下一步骤330，保存修改后的合并图；最后该方法结束语步骤340。本合并CSS样式文件中背景图片的方法的步骤130的图片合并样式的格式流程，使技术人员清晰、快捷找到每一块合并图的具***置，同时在修改或更新图片时，实现无需修改CSS样式的格式的相关问题。
与现有技术相比，本发明的合并CSS样式文件中背景图片的方法的优点在于，减少了网页的http的***数，从而大大的提高了页面的响应性能，不需要专业的工具制作合并图；在更新图片的情况下，直接将需要修改的图片修改后，再重新生成CSS样式文件，无需修改源码。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (9)
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文件之间设置有文件路径的连接。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410822642.XA CN104516971B (zh) | 2014-12-25 | 2014-12-25 | 一种合并css样式文件中背景图片的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410822642.XA CN104516971B (zh) | 2014-12-25 | 2014-12-25 | 一种合并css样式文件中背景图片的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104516971A true CN104516971A (zh) | 2015-04-15 |
| CN104516971B CN104516971B (zh) | 2018-07-13 |
Family
ID=52792270
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410822642.XA Active CN104516971B (zh) | 2014-12-25 | 2014-12-25 | 一种合并css样式文件中背景图片的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104516971B (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105094930A (zh) * | 2015-09-09 | 2015-11-25 | 上海斐讯数据通信技术有限公司 | 一种定位图片***及方法 |
| CN106355207A (zh) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | 一种比对网页中合并图的方法和装置 |
| CN106649499A (zh) * | 2016-10-10 | 2017-05-10 | 五矿电子商务有限公司 | 一种合并网页中背景图的方法和*** |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103164443A (zh) * | 2011-12-14 | 2013-06-19 | 腾讯科技（深圳）有限公司 | 图片合并方法和装置 |
| CN103577552A (zh) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | 网页图片处理方法及装置 |
| CN103699652A (zh) * | 2013-12-26 | 2014-04-02 | 浙江宇天科技股份有限公司 | 一种访问网页的方法和*** |
| CN103905496A (zh) * | 2012-12-27 | 2014-07-02 | 腾讯科技（深圳）有限公司 | 一种图片下载方法及装置 |
-
2014
- 2014-12-25 CN CN201410822642.XA patent/CN104516971B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103164443A (zh) * | 2011-12-14 | 2013-06-19 | 腾讯科技（深圳）有限公司 | 图片合并方法和装置 |
| CN103905496A (zh) * | 2012-12-27 | 2014-07-02 | 腾讯科技（深圳）有限公司 | 一种图片下载方法及装置 |
| CN103577552A (zh) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | 网页图片处理方法及装置 |
| CN103699652A (zh) * | 2013-12-26 | 2014-04-02 | 浙江宇天科技股份有限公司 | 一种访问网页的方法和*** |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105094930A (zh) * | 2015-09-09 | 2015-11-25 | 上海斐讯数据通信技术有限公司 | 一种定位图片***及方法 |
| CN106355207A (zh) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | 一种比对网页中合并图的方法和装置 |
| CN106649499A (zh) * | 2016-10-10 | 2017-05-10 | 五矿电子商务有限公司 | 一种合并网页中背景图的方法和*** |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104516971B (zh) | 2018-07-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104866497B (zh) | 分布式文件***列式存储的元数据更新方法、装置、主机 | |
| US7971175B2 (en) | Method and system for implementing cached parameterized cells | |
| US9779193B1 (en) | Methods, systems, and computer program product for implementing electronic design layouts with symbolic representations | |
| US9311730B2 (en) | Aggregating graph structures | |
| CN104881466B (zh) | 数据分片的处理以及垃圾文件的删除方法和装置 | |
| CN104572668B (zh) | 基于多个样式文件生成合并样式文件的方法和设备 | |
| CN108647025A (zh) | 文档对象模型中节点的处理方法及装置、电子和存储设备 | |
| CN111324577B (zh) | 一种Yml文件读写的方法及装置 | |
| CN106610774A (zh) | 网页表格编辑方法及装置 | |
| CN105808244A (zh) | 一种基于工作流的动态数据可视化分析工具 | |
| CN106445900A (zh) | 一种表格样式处理方法和装置 | |
| CN104090913B (zh) | 基于瘦客户机的文件操作方法及装置 | |
| CN106293669A (zh) | 一种网页组件的生成方法和装置 | |
| CN113094355A (zh) | 基于国产化通信协议的模型实例化方法、装置、设备及介质 | |
| BR112021009093A2 (pt) | sistema de desenvolvimento de website, e método para um sistema de desenvolvimento de website | |
| CN104516971A (zh) | 一种合并css 样式文件中背景图片的方法 | |
| CN104052626A (zh) | 配置网元数据的方法、装置和*** | |
| CN111309424A (zh) | 一种页面还原方法及相关设备 | |
| CN103064749B (zh) | 一种进程间通信方法 | |
| CN109816754A (zh) | 流程图的创建方法、显示方法及***和存储介质 | |
| CN105069046A (zh) | 一种导航数据的更新方法、加载方法及装置 | |
| US10338891B2 (en) | Migration between model elements of different types in a modeling environment | |
| CN102955808A (zh) | 一种数据获取方法和分布式文件*** | |
| CN106294530A (zh) | 规则匹配的方法和*** | |
| CN116400914A (zh) | 一种基于数据模型快速构建web应用的方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |