CN106156371B - Method and device for realizing complete background picture of webpage - Google Patents
Method and device for realizing complete background picture of webpage Download PDFInfo
- Publication number
- CN106156371B CN106156371B CN201610791871.9A CN201610791871A CN106156371B CN 106156371 B CN106156371 B CN 106156371B CN 201610791871 A CN201610791871 A CN 201610791871A CN 106156371 B CN106156371 B CN 106156371B
- Authority
- CN
- China
- Prior art keywords
- webpage
- background
- layer element
- background picture
- setting
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 35
- 238000004364 calculation method Methods 0.000 claims description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Images
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 a complete realization method and a complete realization device of a webpage background picture, wherein the method comprises the following steps: adding a background picture consistent with a background picture of the webpage to an upper element in the webpage; calculating the position of the upper-layer element in the webpage; and setting the background position attribute corresponding to the background picture as a value corresponding to the position of the upper-layer element, so that the upper-layer element displays the part corresponding to the position of the upper-layer element in the background picture. According to the technical characteristics disclosed by the application, the background picture which is the same as the webpage background picture is added to the upper-layer element, so that the upper-layer element is controlled to display the part, which is the same as the part of the webpage background picture covered by the upper-layer element, of the background picture, the background of the upper-layer element is connected with the background of the webpage, and the webpage background picture is completely displayed; according to the technical scheme, the upper-layer elements do not need to be set as the transparent background, so that the content of the lower-layer elements cannot be seen through the upper-layer elements, confusion of different element contents is avoided, and user experience is greatly improved.
Description
Technical Field
The invention relates to the technical field of webpage display, in particular to a method and a device for realizing a complete background picture of a webpage.
Background
In order to make a web page more aesthetically pleasing to a user, it is often desirable to achieve a complete display of the background map of the web page while other elements of the web page are present.
At present, one method for realizing a complete background image of a web page is to display the background image of the whole web page by one picture, and the background image of the web page can be seen by other elements on the web page. However, as the web application is more and more like a client program, the elements in the web page are inevitably overlapped, and if the backgrounds of all the elements are transparent, the content in the lower-layer element can be seen in the upper-layer element in the overlapping of the elements, so that the content between different elements is confused, and the user experience is greatly reduced.
In summary, the scheme for achieving complete display of the webpage background map in the prior art has a problem that when elements are stacked, contents among different elements are mixed up, and thus user experience is reduced.
Disclosure of Invention
The invention aims to provide a method and a device for realizing a complete background picture of a webpage, which are used for solving the problem that in the prior art, the content among different elements is mixed when the elements are stacked, so that the user experience is reduced.
In order to achieve the above purpose, the invention provides the following technical scheme:
a complete implementation method of a webpage background picture comprises the following steps:
adding a background picture consistent with a background picture of the webpage to an upper element in the webpage;
calculating the position of the upper element in the webpage;
and setting the background position attribute corresponding to the background picture as a value corresponding to the position of the upper-layer element, so that the upper-layer element displays the part, corresponding to the position, of the background picture.
Preferably, calculating the position of the upper element in the web page includes:
forming a corresponding webpage coordinate system by taking the upper left corner of the webpage as an origin;
and calculating the horizontal coordinate and the vertical coordinate of the upper left corner of the upper layer element in the webpage coordinate system.
Preferably, the method further comprises the following steps:
and setting the lower layer elements in the webpage as background transparent elements.
Preferably, the method further comprises the following steps:
and if the position of the upper layer element changes, calculating the position of the upper layer element in real time and setting the value of the corresponding background position attribute in real time in the process of changing the position of the upper layer element.
Preferably, the setting of the value of the corresponding background location attribute in real time includes:
and setting the value of the corresponding background position attribute in real time by using the js code.
A complete implementation device of a webpage background picture comprises:
the adding module is used for adding a background picture consistent with the background picture of the webpage to an upper element in the webpage;
the calculation module is used for calculating the position of the upper element in the webpage;
and the upper-layer element setting module is used for setting the background position attribute corresponding to the background picture to a value corresponding to the position of the upper-layer element, so that the upper-layer element displays the part, corresponding to the position, of the background picture.
Preferably, the calculation module includes:
and the calculation unit is used for forming a corresponding webpage coordinate system by taking the upper left corner of the webpage as an origin, and calculating the abscissa and the ordinate of the upper left corner of the upper layer element in the webpage coordinate system.
Preferably, the method further comprises the following steps:
and the lower layer element setting module is used for setting the lower layer elements in the webpage as elements with transparent backgrounds.
Preferably, the method further comprises the following steps:
and the real-time processing module is used for calculating the position of the upper layer element in real time and setting the value of the corresponding background position attribute in real time in the process of changing the position of the upper layer element if the position of the upper layer element changes.
Preferably, the real-time processing module includes:
and the real-time processing unit is used for setting the value of the corresponding background position attribute in real time by using the js code.
The invention provides a complete realization method and a complete realization device of a webpage background picture, wherein the method comprises the following steps: adding a background picture consistent with a background picture of the webpage to an upper element in the webpage; calculating the position of the upper element in the webpage; and setting the background position attribute corresponding to the background picture as a value corresponding to the position of the upper-layer element, so that the upper-layer element displays the part, corresponding to the position, of the background picture. According to the technical characteristics disclosed by the application, the background picture which is the same as the webpage background picture is added to the upper-layer element, so that the upper-layer element is controlled to display the part, which is the same as the part of the webpage background picture covered by the upper-layer element, of the background picture, the background of the upper-layer element is connected with the background of the webpage, and the webpage background picture is completely displayed; according to the technical scheme, the upper-layer elements do not need to be set as the transparent background, so that the content of the lower-layer elements cannot be seen through the upper-layer elements, confusion of different element contents is avoided, and user experience is greatly improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
Fig. 1 is a flowchart of a complete implementation method of a webpage background diagram according to an embodiment of the present invention;
fig. 2 is a schematic structural diagram of a complete implementation apparatus of a web page background map according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, a flowchart of a complete implementation method of a web page background diagram according to an embodiment of the present invention is shown, which may include the following steps:
s11: and adding a background picture consistent with the background picture of the webpage to the upper-layer element in the webpage.
The step may specifically be writing a css style of the upper layer element, so as to add a background picture consistent with a background picture of the web page in the css style, and by adding the background picture and taking the background picture as the background picture of the upper layer element, the upper layer element may display all or part of the background picture. Specifically, because the background picture is consistent with the background picture of the webpage, the size of the background picture is the same as that of the webpage, if the size of the upper layer element is smaller than that of the webpage, the size of the corresponding upper layer element is also smaller than that of the background picture, and only a part of the background picture can be displayed; if the size of the upper layer element is equal to the size of the webpage, the size of the corresponding upper layer element is also equal to the size of the background picture, and the upper layer element can display the whole background picture; of course, the size of the upper layer elements is generally smaller than the size of the web page.
S12: the position of the upper layer element in the web page is calculated.
And calculating the position of the upper-layer element in the webpage to determine which part of the webpage background image is covered by the upper-layer element, and further enabling the upper-layer element to display the same part of the background image in the background image as the covered webpage background image according to the value corresponding to the position.
S13: and setting the background position attribute corresponding to the background picture as a value corresponding to the position of the upper-layer element, so that the upper-layer element displays the part corresponding to the position of the upper-layer element in the background picture.
The value of the background position attribute (background-position attribute) is set to be a value corresponding to the position of the upper element, namely, the value is a display part of the mobile background picture on the upper element, so that the display part of the background picture on the upper element is the same as the part of the webpage background picture covered by the upper element, namely, the upper element displays the part corresponding to the position of the background picture, and therefore, the background of the upper element is connected with the background of the webpage to be a picture, and the display of the complete webpage background picture is realized.
According to the technical characteristics disclosed by the application, the background picture which is the same as the webpage background picture is added to the upper-layer element, so that the upper-layer element is controlled to display the part, which is the same as the part of the webpage background picture covered by the upper-layer element, of the background picture, the background of the upper-layer element is connected with the background of the webpage, and the webpage background picture is completely displayed; according to the technical scheme, the upper-layer elements do not need to be set as the transparent background, so that the content of the lower-layer elements cannot be seen through the upper-layer elements, confusion of different element contents is avoided, and user experience is greatly improved.
The method for completely implementing the webpage background map, provided by the embodiment of the invention, for calculating the position of the upper element in the webpage can comprise the following steps:
forming a corresponding webpage coordinate system by taking the upper left corner of the webpage as an origin;
and calculating the abscissa and the ordinate of the upper left corner of the upper-layer element in the webpage coordinate system.
By setting the upper left corner of the webpage as the origin, the abscissa and the ordinate of the upper left corner of the upper element in the webpage coordinate system can be calculated, the coordinate value is the value corresponding to the position of the upper element, that is, by setting the background-position attribute as the value of the coordinate, the value corresponding to the coordinate value in the background picture can be coincided with the upper left corner of the upper element, and then the corresponding part is displayed in the upper element.
The complete implementation method of the webpage background image provided by the embodiment of the invention can further comprise the following steps:
and setting the lower layer elements in the webpage as background transparent elements.
It should be noted that, by setting the lower layer elements in the web page as elements with transparent background, the lower layer elements can be displayed in accordance with the corresponding portions of the web page background map, and of course, the lower layer elements in the web page may also be processed according to the above technical solution disclosed in the present application, so that even if there are multiple layers of elements, the web page background map can be completely displayed.
The complete implementation method of the webpage background image provided by the embodiment of the invention can further comprise the following steps:
and if the position of the upper layer element changes, calculating the position of the upper layer element in real time and setting the value of the corresponding background position attribute in real time in the process of changing the position of the upper layer element.
When the upper layer element is moved, the position of the upper layer element is changed, but the principle that the background display setting is consistent with the position fixing is adopted, and the difference is only that the position of the upper layer element is calculated in real time in the moving process of the upper layer element and the value of the corresponding background position attribute is set in real time, so that the part corresponding to the current position in the background picture can be kept displayed in the moving process, and the complete display of the webpage background picture can be ensured in the moving process.
The method for completely implementing the webpage background map, provided by the embodiment of the invention, can set the value of the corresponding background position attribute in real time, and can include the following steps:
and setting the value of the corresponding background position attribute in real time by using the js code.
The real-time setting of the background position attribute can be realized through a script language of js codes, namely, the setting can be realized in real time under the running condition of the codes by compiling the corresponding js codes, so that the operation is simplified, and the automation of the technical scheme provided by the embodiment of the invention is improved.
The embodiment of the present invention further provides a complete implementation apparatus for a webpage background map, as shown in fig. 2, the apparatus may include:
the adding module 11 is used for adding a background picture consistent with a background picture of the webpage to an upper element in the webpage;
a calculation module 12 for calculating the position of the upper layer element in the web page;
and an upper element setting module 13, configured to set a background position attribute corresponding to the background picture to a value corresponding to a position of the upper element, so that the upper element displays a portion, corresponding to the position, in the background picture.
In an apparatus for completely implementing a background map of a web page provided in an embodiment of the present invention, a computing module may include:
and the calculation unit is used for forming a corresponding webpage coordinate system by taking the upper left corner of the webpage as an origin, and calculating the abscissa and the ordinate of the upper left corner of the upper-layer element in the webpage coordinate system.
The complete implementation apparatus for a webpage background map provided in the embodiment of the present invention may further include:
and the lower layer element setting module is used for setting the lower layer elements in the webpage as elements with transparent backgrounds.
The complete implementation apparatus for a webpage background map provided in the embodiment of the present invention may further include:
and the real-time processing module is used for calculating the position of the upper layer element in real time and setting the value of the corresponding background position attribute in real time in the process of changing the position of the upper layer element if the position of the upper layer element changes.
In the apparatus for completely implementing a background map of a web page provided in an embodiment of the present invention, the real-time processing module may include:
and the real-time processing unit is used for setting the value of the corresponding background position attribute in real time by using the js code.
For a description of a relevant part in the complete implementation apparatus for a web page background diagram provided by the embodiment of the present invention, reference is made to detailed descriptions of a corresponding part in the complete implementation method for a web page background diagram provided by the embodiment of the present invention, and no further description is given here.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims (8)
1. A complete implementation method of a webpage background picture is characterized by comprising the following steps:
adding a background picture consistent with a background picture of the webpage to an upper element in the webpage;
calculating the position of the upper element in the webpage;
setting a background position attribute corresponding to the background picture to a value corresponding to the position of the upper-layer element, so that the upper-layer element displays a part corresponding to the position of the upper-layer element in the background picture;
the method further comprises the following steps:
and if the position of the upper layer element changes, calculating the position of the upper layer element in real time and setting the value of the corresponding background position attribute in real time in the process of changing the position of the upper layer element, so that the upper layer element displays the part corresponding to the position of the upper layer element in the background picture.
2. The method of claim 1, wherein calculating the position of the upper layer element in the web page comprises:
forming a corresponding webpage coordinate system by taking the upper left corner of the webpage as an origin;
and calculating the horizontal coordinate and the vertical coordinate of the upper left corner of the upper layer element in the webpage coordinate system.
3. The method of claim 2, further comprising:
and setting the lower layer elements in the webpage as background transparent elements.
4. The method of claim 1, wherein setting the value of the corresponding background location attribute in real-time comprises:
and setting the value of the corresponding background position attribute in real time by using the js code.
5. A complete implementation device of a webpage background picture is characterized by comprising:
the adding module is used for adding a background picture consistent with the background picture of the webpage to an upper element in the webpage;
the calculation module is used for calculating the position of the upper element in the webpage;
the upper-layer element setting module is used for setting the background position attribute corresponding to the background picture to a value corresponding to the position of the upper-layer element, so that the upper-layer element displays the part, corresponding to the position, of the background picture;
the device further comprises:
and the real-time processing module is used for calculating the position of the upper layer element in real time and setting the value of the corresponding background position attribute in real time in the process of changing the position of the upper layer element if the position of the upper layer element changes, so that the upper layer element displays the part corresponding to the position of the upper layer element in the background picture.
6. The apparatus of claim 5, wherein the computing module comprises:
and the calculation unit is used for forming a corresponding webpage coordinate system by taking the upper left corner of the webpage as an origin, and calculating the abscissa and the ordinate of the upper left corner of the upper layer element in the webpage coordinate system.
7. The apparatus of claim 6, further comprising:
and the lower layer element setting module is used for setting the lower layer elements in the webpage as elements with transparent backgrounds.
8. The apparatus of claim 5, wherein the real-time processing module comprises:
and the real-time processing unit is used for setting the value of the corresponding background position attribute in real time by using the js code.
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 CN106156371A (en) | 2016-11-23 |
| CN106156371B true 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) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108345486B (en) * | 2018-01-31 | 2021-05-07 | 上海连尚网络科技有限公司 | Interface covering method, equipment and readable medium |
Citations (2)
| 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 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 (2)
| 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106156371A (en) | 2016-11-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10878609B2 (en) | Efficient image synthesis | |
| US10318605B2 (en) | Method and device for relocating input box to target position in mobile terminal browser, storage medium | |
| US9563614B2 (en) | Browser and method for adding and displaying web picture comment | |
| US10339209B2 (en) | Webpage display method and device | |
| CN108156510B (en) | Page focus processing method and device and computer readable storage medium | |
| JP5186047B2 (en) | Object display device, object display method, object display control program, and computer-readable recording medium recording the program | |
| CN111240669B (en) | Interface generation method and device, electronic equipment and computer storage medium | |
| WO2014036927A1 (en) | Method and device for implementing page mask | |
| CN106843794B (en) | Split screen display method and system based on android | |
| CN112954441B (en) | Video editing and playing method, device, equipment and medium | |
| CN105808307B (en) | Page display method and device | |
| CN112783394A (en) | List page display method and device | |
| CN113538502A (en) | Picture clipping method and device, electronic equipment and storage medium | |
| CN107861711B (en) | Page adaptation method and device | |
| CN110837368B (en) | Data processing method and device and electronic equipment | |
| CN106156371B (en) | Method and device for realizing complete background picture of webpage | |
| US10614152B2 (en) | Exposing formatting properties of content for accessibility | |
| CN114415892A (en) | Interface control generation method and device, readable medium and electronic equipment | |
| US20170169792A1 (en) | Electronic device and method for releasing content to multiple terminals | |
| CN105260397A (en) | Method and device for establishing quotation graph | |
| CN112613270A (en) | Method, system, equipment and storage medium for recommending target text based on pre-trained drawing creation model | |
| CN108363525B (en) | Method and device for responding to user gesture operation in webpage and terminal equipment | |
| CN112328940A (en) | Method and device for embedding transition page into webpage, computer equipment and storage medium | |
| CN105677749B (en) | Page display method and device | |
| CN112307378B (en) | Network view display method |
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 |