CN106156371A - A kind of method and device realizing webpage complete background figure - Google Patents
A kind of method and device realizing webpage complete background figure Download PDFInfo
- Publication number
- CN106156371A CN106156371A CN201610791871.9A CN201610791871A CN106156371A CN 106156371 A CN106156371 A CN 106156371A CN 201610791871 A CN201610791871 A CN 201610791871A CN 106156371 A CN106156371 A CN 106156371A
- Authority
- CN
- China
- Prior art keywords
- background
- upper strata
- webpage
- strata element
- real time
- 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
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)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses complete implementation method and the device of a kind of web page background figure, the method includes: add the background picture consistent with the Background of webpage for the upper strata element in webpage；Calculate upper strata element position in webpage；Background positions attribute corresponding for background picture is set to the value corresponding with the position of upper strata element, so that the part that upper strata element is corresponding with its position in showing Background Picture.In above-mentioned technical characteristic disclosed in the present application, by adding the background picture identical with web page background figure for upper strata element, and then control part identical with the web page background figure part that upper strata element covers during upper strata element shows Background Picture, so that the background of the background of upper strata element and webpage is engaged togather, it is achieved the complete display of web page background figure；And by technique scheme without upper strata element is set to transparent background, the content of lower floor's element cannot be seen from there through upper strata element, it is to avoid and the obscuring of different element contents, substantially increase Consumer's Experience.
Description
Technical field
The present invention relates to web displaying technical field, more particularly, it relates to a kind of side realizing webpage complete background figure
Method and device.
Background technology
So that web page is the most attractive in appearance, it usually needs while webpage exists other elements
Realize the complete display of web page background figure.
Realize the Background that a kind of method of web page complete background figure is whole webpage at present to be shown by a pictures,
On webpage, other element all can see that the Background of webpage, and such effect is by setting the background of other elements on webpage
Being set to background transparent just can be with simple realization.But being as web application increasingly as client-side program, the element in webpage is difficult
Exempt from there will be the situation of stacking, if the background of all elements is all transparent, will be on upper strata in the case of element stacking
Element is seen the content in lower floor's element, this content mix that can make between different element, greatly reduce Consumer's Experience.
In sum, prior art exist when element stacking not for realizing the scheme that web page background figure completely shows
The problem that can obscure and then reduce Consumer's Experience with the content between element.
Summary of the invention
It is an object of the invention to provide a kind of method and device realizing webpage complete background figure, to solve in prior art
For realize that the scheme that web page background figure completely shows exists when element stacking time difference element between content can obscure into
And the problem reducing Consumer's Experience.
To achieve these goals, the present invention provides following technical scheme:
A kind of complete implementation method of web page background figure, including:
The background picture consistent with the Background of described webpage is added for the upper strata element in webpage；
Calculate described upper strata element position in described webpage；
Background positions attribute corresponding for described background picture is set to the value corresponding with the position of described upper strata element, with
Described upper strata element is made to show part corresponding with its position in described background picture.
Preferably, calculate described upper strata element position in described webpage, including:
Corresponding webpage coordinate system is formed with the upper left corner of described webpage for initial point；
Calculate the upper left corner of the described upper strata element abscissa in described webpage coordinate system and vertical coordinate.
Preferably, also include:
Lower floor's element in described webpage is set to the element of background transparent.
Preferably, also include:
If the position of described upper strata element changes, then during the position at described upper strata element changes
The position calculating this upper strata element in real time the value of the background positions attribute that correspondence is set in real time.
Preferably, the value of the background positions attribute of correspondence is set in real time, including:
Utilize js code that the value of corresponding background positions attribute is set in real time.
A kind of web page background figure completely realize device, including:
Add module, for adding the background picture consistent with the Background of described webpage for the upper strata element in webpage；
Computing module, for calculating described upper strata element position in described webpage；
Upper strata element arranges module, for being set to and described upper strata by background positions attribute corresponding for described background picture
The value that the position of element is corresponding, so that described upper strata element shows part corresponding with its position in described background picture.
Preferably, described computing module includes:
Computing unit, for forming corresponding webpage coordinate system with the upper left corner of described webpage for initial point, calculates described upper strata
The upper left corner of element abscissa in described webpage coordinate system and vertical coordinate.
Preferably, also include:
Lower floor's element arranges module, for the lower floor's element in described webpage is set to the element of background transparent.
Preferably, also include:
Real-time processing module, if changed, then in the position of described upper strata element for the position of described upper strata element
Put the position calculating this upper strata element during changing in real time the value that corresponding background positions attribute is set in real time.
Preferably, described real-time processing module includes:
Processing unit in real time, for utilizing js code to arrange the value of corresponding background positions attribute in real time.
The invention provides complete implementation method and the device of a kind of web page background figure, wherein the method includes: for webpage
In upper strata element add the background picture consistent with the Background of described webpage；Calculate described upper strata element in described webpage
Position；Background positions attribute corresponding for described background picture is set to the value corresponding with the position of described upper strata element, with
Described upper strata element is made to show part corresponding with its position in described background picture.Above-mentioned technical characteristic disclosed in the present application
In, by adding the background picture identical with web page background figure for upper strata element, and then control upper strata element shows Background Picture
In the identical part of web page background figure part that covers with upper strata element so that the background of the background of upper strata element and webpage
It is engaged togather, it is achieved the complete display of web page background figure；And by technique scheme without upper strata element is set to
Bright background, cannot see the content of lower floor's element from there through upper strata element, it is to avoid the obscuring of different element contents, and significantly carries
High Consumer's Experience.
Accompanying drawing explanation
In order to be illustrated more clearly that the embodiment of the present invention or technical scheme of the prior art, below will be to embodiment or existing
In having technology to describe, the required accompanying drawing used is briefly described, it should be apparent that, the accompanying drawing in describing below is only this
Inventive embodiment, for those of ordinary skill in the art, on the premise of not paying creative work, it is also possible to according to
The accompanying drawing provided obtains other accompanying drawing.
The flow chart of the complete implementation method of a kind of web page background figure that Fig. 1 provides for the embodiment of the present invention；
The structural representation completely realizing device of a kind of web page background figure that Fig. 2 provides for the embodiment of the present invention.
Detailed description of the invention
Below in conjunction with the accompanying drawing in the embodiment of the present invention, the technical scheme in the embodiment of the present invention is carried out clear, complete
Describe, it is clear that described embodiment is only a part of embodiment of the present invention rather than whole embodiments wholely.Based on
Embodiment in the present invention, it is every other that those of ordinary skill in the art are obtained under not making creative work premise
Embodiment, broadly falls into the scope of protection of the invention.
Refer to Fig. 1, it illustrates the stream of the complete implementation method of a kind of web page background figure that the embodiment of the present invention provides
Cheng Tu, may comprise steps of:
S11: add the background picture consistent with the Background of webpage for the upper strata element in webpage.
This step is specifically as follows the css pattern writing upper strata element, to add the background with webpage in this css pattern
Scheme consistent background picture, by adding this background picture and using this background picture as the Background of upper strata element, can make
Upper strata element show Background Picture all or part of.Specifically, owing to background picture is consistent with the Background of webpage,
Therefore the size of background picture and webpage is equivalently-sized, if the size being smaller in size than webpage of upper strata element, corresponding is upper
The size of layer element is again smaller than the size of background picture, and it is only able to display a part for background picture；If the chi of upper strata element
The very little size equal to webpage, the size of corresponding upper strata element is also equal to the size of background picture, and it can show Background Picture
Whole；Certainly, generally, the size being smaller in size than webpage of upper strata element.
S12: calculate upper strata element position in webpage.
Calculate upper strata element position in webpage, to determine that upper strata element covers which part of webpage Background, and then
The part that the web page background figure that upper strata element covered according to the value that this position is corresponding in showing Background Picture with it is identical.
S13: background positions attribute corresponding for background picture is set to the value corresponding with the position of upper strata element, so that
The part that upper strata element is corresponding with its position in showing Background Picture.
Wherein, the position pair that value is upper strata element of background positions attribute (background-position attribute) is set
The value answered, is the mobile background picture display part at upper strata element, so that background picture is at the display part of upper strata element
Point identical with the part of web page background figure of upper strata element covering, namely during upper strata element is showed Background Picture with its position
Corresponding part, so that it similarly is a pictures that the background of the background of upper strata element and webpage is engaged togather, it is achieved complete
The display of whole web page background figure.
In above-mentioned technical characteristic disclosed in the present application, by adding the Background identical with web page background figure for upper strata element
Sheet, and then control part identical with the web page background figure part that upper strata element covers during upper strata element shows Background Picture, from
And the background of upper strata element and the background of webpage are engaged togather, it is achieved the complete display of web page background figure；And by upper
State technical scheme without upper strata element is set to transparent background, in lower floor's element cannot being seen from there through upper strata element
Hold, it is to avoid the obscuring of different element contents, substantially increase Consumer's Experience.
The complete implementation method of a kind of web page background figure that the embodiment of the present invention provides, calculates upper strata element in webpage
Position, may include that
Corresponding webpage coordinate system is formed with the upper left corner of webpage for initial point；
Calculate the upper left corner of the upper strata element abscissa in webpage coordinate system and vertical coordinate.
By the upper left corner of webpage is set to initial point, the upper left corner of upper strata element can be calculated in webpage coordinate system
Abscissa and vertical coordinate, this coordinate figure is the value that the position of upper strata element is corresponding, namely by by background-
Position attribute is set to this seat target value, it is possible to make value corresponding with this coordinate figure in background picture and upper strata element
The upper left corner overlaps, and then carries out the part that display is corresponding in the element of upper strata.
The complete implementation method of a kind of web page background figure that the embodiment of the present invention provides, it is also possible to including:
Lower floor's element in webpage is set to the element of background transparent.
Wherein it should be noted that the lower floor's element in webpage to be set to the element of background transparent, thus, lower floor's element
Conforming display can be realized with web page background figure corresponding part, it is of course also possible to according to above-mentioned technology disclosed in the present application
Lower floor's element in webpage is processed by scheme, thus, even if there is multilamellar element, it is also possible to realize the complete of web page background figure
Whole display.
The complete implementation method of a kind of web page background figure that the embodiment of the present invention provides, it is also possible to including:
If the position of upper strata element changes, then the position at upper strata element calculates during changing in real time
The position of this upper strata element also arranges the value of background positions attribute of correspondence in real time.
When upper strata element is moved, its position changes, but the setting showing its background is fixed with its position
Time principle be consistent, differ only in the position needing to calculate in real time this upper strata element in the moving process of upper strata element
Put and arrange in real time the value of the background positions attribute of correspondence, so that during it can keep showing Background Picture in moving process
The part corresponding with current location, thus ensure its complete display also being able to realize web page background figure in moving process.
The complete implementation method of a kind of web page background figure that the embodiment of the present invention provides, arranges the background positions of correspondence in real time
The value of attribute, may include that
Utilize js code that the value of corresponding background positions attribute is set in real time.
For the real-time setting of background positions attribute, can be realized by this script of js code, namely by compiling
Write the js code of correspondence make above-mentioned setting can under the service condition of this code real-time implementation, thus simplify operation, carry
The automatization of the technique scheme that the high embodiment of the present invention provides.
What the embodiment of the present invention additionally provided a kind of web page background figure completely realizes device, as in figure 2 it is shown, may include that
Add module 11, for adding the background picture consistent with the Background of webpage for the upper strata element in webpage；
Computing module 12, for calculating upper strata element position in webpage；
Upper strata element arranges module 13, for being set to and upper strata element by background positions attribute corresponding for background picture
The value that position is corresponding, so that the part that upper strata element is corresponding with its position in showing Background Picture.
The embodiment of the present invention provide a kind of web page background figure completely realize device, computing module may include that
Computing unit, for forming corresponding webpage coordinate system with the upper left corner of webpage for initial point, calculates a left side for upper strata element
Upper angle abscissa in webpage coordinate system and vertical coordinate.
The embodiment of the present invention provide a kind of web page background figure completely realize device, it is also possible to including:
Lower floor's element arranges module, for the lower floor's element in webpage is set to the element of background transparent.
The embodiment of the present invention provide a kind of web page background figure completely realize device, it is also possible to including:
Real-time processing module, if changed for the position of upper strata element, then the position at upper strata element becomes
The position calculating this upper strata element during change in real time the value of the background positions attribute that correspondence is set in real time.
The embodiment of the present invention provide a kind of web page background figure completely realize device, real-time processing module may include that
Processing unit in real time, for utilizing js code to arrange the value of corresponding background positions attribute in real time.
The explanation of relevant portion in device that completely realizes of a kind of web page background figure that the embodiment of the present invention provides refers to
In the complete implementation method of a kind of web page background figure that the embodiment of the present invention provides, the detailed description of corresponding part, says at this most again
Bright.
Described above to the disclosed embodiments, makes those skilled in the art be capable of or uses the present invention.To this
The multiple amendment of a little embodiments will be apparent from for a person skilled in the art, and generic principles defined herein can
With without departing from the spirit or scope of the present invention, realize in other embodiments.Therefore, the present invention will not be limited
It is formed on the embodiments shown herein, and is to fit to consistent with principles disclosed herein and features of novelty the widest
Scope.
Claims (10)
1. the complete implementation method of a web page background figure, it is characterised in that including:
The background picture consistent with the Background of described webpage is added for the upper strata element in webpage；
Calculate described upper strata element position in described webpage；
Background positions attribute corresponding for described background picture is set to the value corresponding with the position of described upper strata element, so that
Described upper strata element shows part corresponding with its position in described background picture.
Method the most according to claim 1, it is characterised in that calculate described upper strata element position in described webpage,
Including:
Corresponding webpage coordinate system is formed with the upper left corner of described webpage for initial point；
Calculate the upper left corner of the described upper strata element abscissa in described webpage coordinate system and vertical coordinate.
Method the most according to claim 2, it is characterised in that also include:
Lower floor's element in described webpage is set to the element of background transparent.
Method the most according to claim 1, it is characterised in that also include:
If the position of described upper strata element changes, then during the position at described upper strata element changes in real time
The position calculating this upper strata element the value of the background positions attribute that correspondence is set in real time.
Method the most according to claim 4, it is characterised in that the value of the background positions attribute of correspondence is set in real time, including:
Utilize js code that the value of corresponding background positions attribute is set in real time.
6. a web page background figure completely realize device, it is characterised in that including:
Add module, for adding the background picture consistent with the Background of described webpage for the upper strata element in webpage；
Computing module, for calculating described upper strata element position in described webpage；
Upper strata element arranges module, for being set to and described upper strata element by background positions attribute corresponding for described background picture
Value corresponding to position so that described upper strata element shows part corresponding with its position in described background picture.
Device the most according to claim 6, it is characterised in that described computing module includes:
Computing unit, for forming corresponding webpage coordinate system with the upper left corner of described webpage for initial point, calculates described upper strata element
Upper left corner abscissa in described webpage coordinate system and vertical coordinate.
Device the most according to claim 7, it is characterised in that also include:
Lower floor's element arranges module, for the lower floor's element in described webpage is set to the element of background transparent.
Device the most according to claim 6, it is characterised in that also include:
Real-time processing module, if changed for the position of described upper strata element, then the position at described upper strata element is sent out
The position calculating this upper strata element during changing in real time the value of the background positions attribute that correspondence is set in real time.
Device the most according to claim 9, it is characterised in that described real-time processing module includes:
Processing unit in real time, for utilizing js code to arrange the value of corresponding background positions attribute in real time.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610791871.9A CN106156371B (en) | 2016-08-31 | 2016-08-31 | Method and device for realizing complete background picture of webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610791871.9A CN106156371B (en) | 2016-08-31 | 2016-08-31 | Method and device for realizing complete background picture of webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106156371A true CN106156371A (en) | 2016-11-23 |
| CN106156371B CN106156371B (en) | 2020-03-06 |
Family
ID=57345543
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610791871.9A Active CN106156371B (en) | 2016-08-31 | 2016-08-31 | Method and device for realizing complete background picture of webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106156371B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108345486A (en) * | 2018-01-31 | 2018-07-31 | 上海连尚网络科技有限公司 | A kind of interface covering method, equipment and readable medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102323939A (en) * | 2011-08-31 | 2012-01-18 | 百度在线网络技术（北京）有限公司 | Method and device for determining background information of rearranged elements in page rearranging process |
| CN103631867A (en) * | 2013-11-01 | 2014-03-12 | 北京奇虎科技有限公司 | Webpage display method and browser |
| US20150242374A1 (en) * | 2014-02-27 | 2015-08-27 | Styla GmbH | Automatic layout technology |
-
2016
- 2016-08-31 CN CN201610791871.9A patent/CN106156371B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102323939A (en) * | 2011-08-31 | 2012-01-18 | 百度在线网络技术（北京）有限公司 | Method and device for determining background information of rearranged elements in page rearranging process |
| CN103631867A (en) * | 2013-11-01 | 2014-03-12 | 北京奇虎科技有限公司 | Webpage display method and browser |
| US20150242374A1 (en) * | 2014-02-27 | 2015-08-27 | Styla GmbH | Automatic layout technology |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108345486A (en) * | 2018-01-31 | 2018-07-31 | 上海连尚网络科技有限公司 | A kind of interface covering method, equipment and readable medium |
| CN108345486B (en) * | 2018-01-31 | 2021-05-07 | 上海连尚网络科技有限公司 | Interface covering method, equipment and readable medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106156371B (en) | 2020-03-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9075429B1 (en) | Distortion correction for device display | |
| CN110389810B (en) | Method, device and equipment for quickly placing UI (user interface) control on virtual canvas | |
| CN104102418B (en) | Input frame target location localization method and device in a kind of browser of mobile terminal | |
| CN107704177A (en) | interface display method, device and terminal | |
| CN104461301B (en) | The method that screen window automatic aligning is realized based on world coordinates | |
| CN103414844A (en) | Video dithering correction method and device | |
| CN104035664A (en) | Display method and device for user interface of application program | |
| CN103164839A (en) | Method, device and terminal for drawing | |
| US20170293421A1 (en) | Interface Display Method and Apparatus | |
| CN103995646A (en) | Transverse screen display control method and system | |
| WO2015106516A1 (en) | Suspended input method, apparatus, and computer storage medium | |
| KR20150012299A (en) | Image processing method and apparatus | |
| CN104461312A (en) | Display control method and electronic equipment | |
| CN104635755B (en) | Display method of adjustment and equipment | |
| CN104615764A (en) | Display method and electronic equipment | |
| KR20140102386A (en) | Display apparatus and control method thereof | |
| CN106156371A (en) | A kind of method and device realizing webpage complete background figure | |
| US20160364031A1 (en) | Storage medium, display control device, display control system, and display method | |
| CN103236042A (en) | Self-adaptive picture processing method and device | |
| CN111290754B (en) | Component rendering method and device | |
| CN104516696A (en) | Information processing method and electronic device | |
| CN110548289B (en) | Method and device for displaying three-dimensional control | |
| CN104238892A (en) | Information processing method and electronic equipment | |
| CN105511764A (en) | Method and device for moving page of terminal, and terminal | |
| CN112486616A (en) | Interface display method, interface display device, electronic equipment and storage medium |
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 |