CN104516971A - Method for combining background pictures in CSS style file - Google Patents
Method for combining background pictures in CSS style file 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
Abstract
The invention relates to a method for combining background pictures in a CSS style file, which is particularly suitable for a condition that a loading performance of a website page with a large number of page views needs to be optimized. The method comprises the following steps: obtaining a path of the CSS file; opening the CSS file; obtaining a needed combined picture style; obtaining a combined picture path and a single picture path in the combined picture style; obtaining pictures according to the combined picture path and the single picture path and combining the pictures into a new combined picture; storing the new combined picture and changing the combined picture style; judging whether the combination of the combined picture is finished or not; if so, storing the combined picture and opening the next CCS file; otherwise, repeatedly obtaining the combined picture and obtaining the combined picture style. By the aid of the method for combining the background pictures in the CSS style file, a http request on a webpage by picture loading can be reduced so that the performance of the page is improved; the style is convenient to replace; after the picture needing to be modified is modified, the CSS style file can be regenerated and a source code does not need to be modified.
Description
Technical field
The present invention relates to network communication technology field, more particularly, relating to the method for background picture in a kind of merging CSS pattern file of the loading performance for optimizing large visit capacity Website page.
Background technology
When to visit capacity, performance optimization is carried out in website significantly, wherein have any to be reduce http linking number, reason is very clear as far as possible, decrease the http linking number of single PV, can Internet traffic be reduced, improve the response speed of the page, certainly also can increase the user load number of single server.
In css webpage pattern file, a kind of common method, merge the little Background of Css, merging the little Background this point of Css has had a lot of large website all doing, such as Taobao, Baidu's mhkc, they the page seem much little background picture, and in fact these pictures have all been merged into a figure greatly, then with the position that the Background-positioin property control of Css shows Background Picture, multiple little background picture is merged into a figure greatly, by decreasing http linking number, to promote the performance that Website page loads.
Prior art comprises:
A, directly to write in CSS pattern file
1, in CSS style source file, picture " icon_All.png " is written as following pattern
.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, control by Background-positioin attribute the picture needing display
B, CSS background picture merges instrument
Css Background merges kit containing following functions:
1, with the addition of by mouse drag picture or the function changing Pictures location with directionkeys
2, the large map generalization type of view picture can be set, because have problem under the display of png file Transparent color under ie6;
3, the background colour of large figure can be set, be defaulted as Transparent color
4, after choosing picture, more picture can be added with the "+" button
5, after choosing picture, picture can be removed with "-" button, or direct removing with Delete key chooses picture
6, also can generate a CSS file while generated background picture, wherein contain the CSS code corresponding to each little figure.
The shortcoming of prior art is:
In CSS source file, use Background-positioin to locate picture, cumbersome when exploitation, pass through the exact position of photoshop or other each background cell of instrument survey calculation, this is needlework, does not have difficulty, but very loaded down with trivial details; If page layout background has a little change, generally will change these opening and closing picture also, place without the need to changing had better not be moved, avoid like this changing more css, if failed to lay down at the old place, (best) down can only add picture again, the byte of such picture just adds, and also will change css pattern file.
CSS background picture merges instrument, Photoshop instrument and surveying work is used although solve, but this instrument first becomes CSS pattern file and then uses, if but have amendment, need to regenerate picture and pattern, use new CSS pattern to remodify CSS pattern file source code.
Summary of the invention
Technical matters to be solved by this invention is, too complicated for existing merging figure computing method, change wherein a width figure time, need the defect revising source code, a kind of complete, method of merging background picture in CSS pattern file is easily provided, for decreasing the http request of webpage, thus improve the performance of the page greatly; Replacing style is convenient, after directly being revised by the picture needing to revise, then regenerates CSS pattern file, without the need to revising source code.
The technical scheme that the present invention solves the problems of the technologies described above is as follows: a kind of method merging background picture in CSS pattern file, comprises the following steps: 110, obtain CSS file path; 120, CSS file is opened; 130, according to CSS file, required merging figure pattern is obtained; 140, according to the URL merging figure pattern, the merging figure path in described merging figure pattern and free hand drawing path is obtained; 150, by merging figure path and free hand drawing path, obtaining picture, and picture is merged into merging figure; 160, judge whether picture exists another merging figure, if it is goes to step 161, otherwise preserve described merging figure, go to step 170; 161, described another merging figure changed to described merging figure and preserves, going to step 170; 170, according to the merging figure after preservation, its merging figure pattern is changed; 180, judge whether the merging of merging figure, if it is gone to step 181, otherwise go to step 130; 181, preserve described merging figure, go to step 120.
Preferably, described merging figure path is the merging figure path formed after free hand drawing path merges.
Preferably, the merging figure pattern changing merging figure is embedded among the URL of merging figure pattern in the path of merging figure.
Preferably, described merging figure pattern can be arranged voluntarily.
Preferably, the setting steps of described merging figure pattern comprises:
A, the height of merging figure is set;
B, the width of merging figure is set;
Preferably, during described merging figure change free hand drawing, the free hand drawing path implement in figure path is merged by change.
Preferably, described merging figure path is provided with IP and the port of cloud storage server, for storing merging figure.
Preferably, the setting of described merging figure pattern also comprises the path arranging merging figure, so that the change at any time in described free hand drawing path.
Preferably, the connection of file path is provided with between described CSS file and next CSS file.
Implement the method for the background picture in merging CSS pattern file of the present invention, there is following beneficial effect: the access links number decreasing the http of webpage, thus improve the response performance of the page greatly, do not need the tool making merging figure of specialty; When upgrading picture, after directly being revised by the picture needing to revise, then regenerate CSS pattern file, without the need to revising source code.
Accompanying drawing explanation
Fig. 1 is the process flow diagram of the first preferred embodiment of the method for the background picture merged in CSS pattern file of the present invention;
Fig. 2 is the process flow diagram of the sample code merging figure of the first preferred embodiment of the method for the background picture merged in CSS pattern file of the present invention;
Fig. 3 is the process flow diagram of the second preferred embodiment of the method for background picture in merging CSS pattern file of the present invention;
Fig. 4 is first of the method for background picture in merging CSS pattern file of the present invention preferably or the setting procedure figure of the merging figure pattern of the second preferred embodiment.
Embodiment
In order to make object of the present invention, technical scheme and advantage clearly understand, below in conjunction with drawings and Examples, the present invention is further elaborated.Should be appreciated that specific embodiment described herein only in order to explain the present invention, be not intended to limit the present invention.
As shown in Figure 1, merge in the process flow diagram of the first preferred embodiment of the method for background picture in CSS pattern file of the present invention, in described merging CSS pattern file, the method for background picture starts from step 100: proceed to step 110 after step 100, obtain CSS file path; Subsequently, to next step 120, open CSS file; Subsequently, to next step 130, according to CSS file, obtain required merging figure pattern; Subsequently, to next step 140, according to the URL merging figure pattern, obtain the merging figure path in described merging figure pattern and free hand drawing path; Subsequently, to next step 150, by merging figure path and free hand drawing path, obtaining picture, and picture being merged into new merging figure; Subsequently, to next step 160, judge whether picture exists another merging figure, if it is goes to step 161, otherwise described merging figure will be preserved; Subsequently, to next step 170, according to the merging figure after preservation, change its merging figure pattern; Subsequently, to next step 180, judge whether the merging of merging figure, if it is gone to step 181, otherwise gone to step 130; Described step 161, for described another merging figure is changed to described merging figure and preserves, goes to step 170; Described step 181, for preserving described merging figure, goes to step 120; Last the method ends at step 190.
Preferably, described merging figure path is the merging figure path formed after free hand drawing path merges.
Preferably, the merging figure pattern changing merging figure is embedded among the URL of merging figure pattern in the path of merging figure.
Preferably, described merging figure pattern can be arranged voluntarily.
Preferably, during described merging figure change free hand drawing, the free hand drawing path implement in figure path is merged by change.
Preferably, described merging figure path is provided with IP and the port of cloud storage server, for storing merging figure.
Preferably, the connection of file path is provided with between described CSS file and next CSS file.
Preferably, described merging figure path is provided with IP and the port of cloud storage server.
Described cloud storage server, for storing merging figure.
The method of the background picture in this merging CSS pattern file extracts the information in required picture path in webpage, and this category information is merged into a merging figure path, reduce and open the link number that webpage reads a large amount of pictorial information, in merging figure path, each picture is again separate existence, convenient when modifying to any image, and do not have influence on recalculating and arrangement of other pictures, adopt the method for the background picture in merging CSS pattern file of the present invention can be quick, improve the reading problem of a large amount of picture in the higher website of visit capacity easily, further reduce the link number of picture, optimize the response performance of Webpage, and by the method for different picture unified management, realizing any image in different picture revises all without the need to amendment, merge the style format of figure.
As shown in Figure 2, in the process flow diagram of the first preferred embodiment of the method for the background picture in merging CSS pattern file of the present invention, this preferred embodiment and the first preferred embodiment are distinguished and are to adopt sample code further to supplement embodiment, in described merging CSS pattern file, the method for background picture starts from step 1: proceed to step 2 after step 1, obtain CSS file path; Subsequently, to next step 3, open CSS file; Subsequently, to next step 4, according to CSS file, obtain required merging figure pattern; Subsequently, to next step 5, according to the URL merging figure pattern, obtain the picture path before the merging in described merging figure pattern; Subsequently, to next step 6, judge whether the composing picture that there is Iocn_all.png, if it is go to step 7, otherwise go to step 8; Step 7, amendment Iocn_all.png composing picture, is merged in Iocn_all.png by the picture in step 5, goes to step 9 subsequently; Step 8, saves as Iocn_all.png by the picture in step 5, goes to step 9 subsequently; Step 9, merges figure pattern according to composing picture in the path amendment that Iocn_all.png generates; Subsequently, to next step 10, judge whether the merging of all pictures, if it is gone to step 11, otherwise gone to step 4; Step 11, preserves amended CSS file, and carries out next CSS file, namely goes to step 3; Last the method ends at step 12.
In the method for the background picture in merging CSS pattern file of the present invention CSS file merging figure pattern in, picture background is write by single pictorial manner, but used by background picture pattern of annotated information to add the backstyle needing merging before and after it, the background picture in .x-note-icon .x-rss-icon .x-man-icon tri-patterns is merged into icon_All.png picture by following coded representation.
After picture merges, the code of the merging figure pattern of the CSS file of website actual motion is:
The method of the background picture in this merging CSS pattern file, by changing the URL of picture, the pattern of amendment composing picture, realizes directly by after the picture amendment of needs amendment, then regenerates CSS pattern file, without the need to revising the function of source code.
As shown in Figure 3, merge in the process flow diagram of the second preferred embodiment of the method for background picture in CSS pattern file of the present invention, in described merging CSS pattern file, the method for background picture starts from step 200: proceed to step 210 after step 200, obtain the merging figure pattern in database; Subsequently, to next step 220, according to the pattern of required merging figure, background picture is merged into merging figure, and among the pattern being embedded in merging figure; Subsequently, to next step 230, the pattern according to the merging figure obtained preserves the path merging figure, and last the method ends at step 240.In this merging CSS pattern file, the method for background picture is by merging figure pattern to database extract real-time, when adding new background picture as required, be opening and closing by merging Background and scheme, reduce and merge figure pattern to the reading respectively of each picture, the picture reducing Webpage reads problem, optimizes Webpage to the process of picture and response problem.
As shown in Figure 4, in the form process flow diagram of the picture Merge Styles of the step 130 of method first preferred embodiment of the background picture in merging CSS pattern file of the present invention, the step 130 of the method for the background picture in described merging CSS pattern file starts from step 300; Carry out step 310 after step 300, the height of merging figure is set; Subsequently, to next step 320, the width of merging figure is set; Subsequently, to next step, the path of merging figure is set; Subsequently, to next step 330, preserve amended merging figure; Last the method conclusion step 340.The form flow process of the picture Merge Styles of the step 130 of the method for background picture in this merging CSS pattern file, make the particular location that technician is clear, fast find each merged block figure, simultaneously when revising or upgrade picture, realize the relevant issues of the form without the need to revising CSS pattern.
Compared with prior art, in merging CSS pattern file of the present invention, the advantage of the method for background picture is, decreases the access links number of the http of webpage, thus improves the response performance of the page greatly, do not need the tool making merging figure of specialty; When upgrading picture, after directly being revised by the picture needing to revise, then regenerate CSS pattern file, without the need to revising source code.
The foregoing is only embodiments of the invention; not thereby the scope of the claims of the present invention is limited; every equivalent structure transformation utilizing instructions of the present invention and accompanying drawing content to do, or be directly or indirectly used in other relevant technical fields, be all in like manner included in scope of patent protection of the present invention.
Claims (9)
1. merge a method for background picture in CSS pattern file, it is characterized in that, comprise the following steps:
110, CSS file path is obtained;
120, CSS file is opened;
130, according to CSS file, required merging figure pattern is obtained;
140, according to the URL merging figure pattern, the merging figure path in described merging figure pattern and free hand drawing path is obtained;
150, by merging figure path and free hand drawing path, obtaining picture, and picture is merged into merging figure;
160, judge whether picture exists another merging figure, if it is goes to step 161, otherwise preserve described merging figure, go to step 170;
161, described another merging figure changed to described merging figure and preserves, going to step 170;
170, according to the merging figure after preservation, its merging figure pattern is changed;
180, judge whether the merging of merging figure, if it is gone to step 181, otherwise go to step 130;
181, preserve described merging figure, go to step 120.
2. the method merging background picture in CSS pattern file according to claim 1, is characterized in that, described merging figure path is the merging figure path formed after free hand drawing path merges.
3. the method merging background picture in CSS pattern file according to claim 1, is characterized in that, in described step 160, the merging figure pattern of change merging figure is embedded among the URL of merging figure pattern in the path of merging figure.
4. the method merging background picture in CSS pattern file according to claim 1, it is characterized in that, described merging figure pattern can be arranged voluntarily.
5. the method merging background picture in CSS pattern file according to claim 1, it is characterized in that, the setting steps of described merging figure pattern comprises:
A, the height of merging figure is set;
B, the width of merging figure is set.
6. the method merging background picture in CSS pattern file according to claim 1, is characterized in that, during described merging figure change free hand drawing, merges the free hand drawing path implement in figure path by change.
7. the method merging background picture in CSS pattern file according to claim 1, it is characterized in that, described merging figure path is provided with IP and the port of cloud storage server, for storing merging figure.
8. the method merging background picture in CSS pattern file according to claim 5, it is characterized in that, the setting of described merging figure pattern also comprises the path arranging merging figure, so that the change at any time in described free hand drawing path.
9. the method merging background picture in CSS pattern file according to claim 5, is characterized in that, be provided with the connection of file path between described CSS file and next CSS file.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410822642.XA CN104516971B (en) | 2014-12-25 | 2014-12-25 | A method of merging background picture in CSS style file |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410822642.XA CN104516971B (en) | 2014-12-25 | 2014-12-25 | A method of merging background picture in CSS style file |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104516971A true CN104516971A (en) | 2015-04-15 |
| CN104516971B CN104516971B (en) | 2018-07-13 |
Family
ID=52792270
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410822642.XA Active CN104516971B (en) | 2014-12-25 | 2014-12-25 | A method of merging background picture in CSS style file |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104516971B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105094930A (en) * | 2015-09-09 | 2015-11-25 | 上海斐讯数据通信技术有限公司 | Image positioning system and method |
| CN106355207A (en) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | Method and device for comparing combined images in webpage |
| CN106649499A (en) * | 2016-10-10 | 2017-05-10 | 五矿电子商务有限公司 | Method and system for combining background pictures in webpage |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103164443A (en) * | 2011-12-14 | 2013-06-19 | 腾讯科技（深圳）有限公司 | Method and device of picture merging |
| CN103577552A (en) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | Webpage picture processing method and device |
| CN103699652A (en) * | 2013-12-26 | 2014-04-02 | 浙江宇天科技股份有限公司 | Webpage access method and webpage access system |
| CN103905496A (en) * | 2012-12-27 | 2014-07-02 | 腾讯科技（深圳）有限公司 | Picture downloading method and device |
-
2014
- 2014-12-25 CN CN201410822642.XA patent/CN104516971B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103164443A (en) * | 2011-12-14 | 2013-06-19 | 腾讯科技（深圳）有限公司 | Method and device of picture merging |
| CN103905496A (en) * | 2012-12-27 | 2014-07-02 | 腾讯科技（深圳）有限公司 | Picture downloading method and device |
| CN103577552A (en) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | Webpage picture processing method and device |
| CN103699652A (en) * | 2013-12-26 | 2014-04-02 | 浙江宇天科技股份有限公司 | Webpage access method and webpage access system |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105094930A (en) * | 2015-09-09 | 2015-11-25 | 上海斐讯数据通信技术有限公司 | Image positioning system and method |
| CN106355207A (en) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | Method and device for comparing combined images in webpage |
| CN106649499A (en) * | 2016-10-10 | 2017-05-10 | 五矿电子商务有限公司 | Method and system for combining background pictures in webpage |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104516971B (en) | 2018-07-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104866497B (en) | The metadata updates method, apparatus of distributed file system column storage, host | |
| CN103731483B (en) | Virtual file system based on cloud computing | |
| 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 (en) | The processing of data fragmentation and the delet method of garbage files and device | |
| CN104572668B (en) | Method and apparatus based on multiple pattern file generated Merge Styles files | |
| CN108647025A (en) | Processing method and processing device, electronics and the storage device of DOM Document Object Model interior joint | |
| CN111324577B (en) | Yml file reading and writing method and device | |
| CN106610774A (en) | Webpage table editing method and device | |
| CN105808244A (en) | Dynamic data visualized analysis tool based on workflows | |
| CN106445900A (en) | Table style processing method and device | |
| CN106843820A (en) | Code process method and apparatus | |
| CN106293669A (en) | A kind of generation method and apparatus of web pages component | |
| CN113094355A (en) | Model instantiation method, device, equipment and medium based on domestic communication protocol | |
| CN104516971A (en) | Method for combining background pictures in CSS style file | |
| BR112021009093A2 (en) | website development system, and method for a website development system | |
| CN103064749B (en) | Inter-process communication method | |
| JP5759187B2 (en) | A program for converting an SWF format image representation by AdobeFlash (registered trademark) into an HTML format image representation | |
| CN109816754A (en) | Creation method, display methods and the system and storage medium of flow chart | |
| CN105069046A (en) | Navigation data updating method and loading method and apparatus | |
| US10338891B2 (en) | Migration between model elements of different types in a modeling environment | |
| CN102955808A (en) | Data acquisition method and distributed file system | |
| CN106294530A (en) | The method and system of rule match | |
| CN111309424A (en) | Page restoration method and related equipment |
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 |