本發(fā)明涉及網(wǎng)頁顯示技術領域，更具體地說，涉及一種實現(xiàn)網(wǎng)頁完整背景圖的方法及裝置。

背景技術：

為了使得web網(wǎng)頁對于用戶來說更加美觀，通常需要在網(wǎng)頁存在其他元素的同時實現(xiàn)網(wǎng)頁背景圖的完整顯示。

目前實現(xiàn)web網(wǎng)頁完整背景圖的一種方法是整個網(wǎng)頁的背景圖由一張圖片顯示，網(wǎng)頁上其他的元素均可以看見網(wǎng)頁的背景圖，這樣的效果通過將網(wǎng)頁上其他元素的背景設置為背景透明就可以簡單實現(xiàn)。但是隨著網(wǎng)頁應用越來越像客戶端程序，網(wǎng)頁中的元素難免會出現(xiàn)層疊的情況，如果所有元素的背景都是透明的話，元素層疊的情況中就會在上層元素中看到下層元素中的內容，這會使得不同元素之間的內容混淆，大大降低了用戶體驗。

綜上所述，現(xiàn)有技術中用于實現(xiàn)網(wǎng)頁背景圖完整顯示的方案存在當元素層疊時不同元素之間的內容會混淆進而降低用戶體驗的問題。

技術實現(xiàn)要素：

本發(fā)明的目的是提供一種實現(xiàn)網(wǎng)頁完整背景圖的方法及裝置，以解決現(xiàn)有技術中用于實現(xiàn)網(wǎng)頁背景圖完整顯示的方案存在的當元素層疊時不同元素之間的內容會混淆進而降低用戶體驗的問題。

為了實現(xiàn)上述目的，本發(fā)明提供如下技術方案：

一種網(wǎng)頁背景圖的完整實現(xiàn)方法，包括：

為網(wǎng)頁中的上層元素添加與所述網(wǎng)頁的背景圖一致的背景圖片；

計算所述上層元素在所述網(wǎng)頁中的位置；

將所述背景圖片對應的背景位置屬性設置為與所述上層元素的位置對應的值，以使得所述上層元素顯示所述背景圖片中與其位置對應的部分。

優(yōu)選的，計算所述上層元素在所述網(wǎng)頁中的位置，包括：

以所述網(wǎng)頁的左上角為原點形成對應網(wǎng)頁坐標系；

計算所述上層元素的左上角在所述網(wǎng)頁坐標系中的橫坐標及縱坐標。

優(yōu)選的，還包括：

將所述網(wǎng)頁中的下層元素設置為背景透明的元素。

優(yōu)選的，還包括：

如果所述上層元素的位置發(fā)生變化，則在所述上層元素的位置發(fā)生變化的過程中實時計算該上層元素的位置并實時設置對應的背景位置屬性的值。

優(yōu)選的，實時設置對應的背景位置屬性的值，包括：

利用js代碼實時設置對應的背景位置屬性的值。

一種網(wǎng)頁背景圖的完整實現(xiàn)裝置，包括：

添加模塊，用于為網(wǎng)頁中的上層元素添加與所述網(wǎng)頁的背景圖一致的背景圖片；

計算模塊，用于計算所述上層元素在所述網(wǎng)頁中的位置；

上層元素設置模塊，用于將所述背景圖片對應的背景位置屬性設置為與所述上層元素的位置對應的值，以使得所述上層元素顯示所述背景圖片中與其位置對應的部分。

優(yōu)選的，所述計算模塊包括：

計算單元，用于以所述網(wǎng)頁的左上角為原點形成對應網(wǎng)頁坐標系，計算所述上層元素的左上角在所述網(wǎng)頁坐標系中的橫坐標及縱坐標。

優(yōu)選的，還包括：

下層元素設置模塊，用于將所述網(wǎng)頁中的下層元素設置為背景透明的元素。

優(yōu)選的，還包括：

實時處理模塊，用于如果所述上層元素的位置發(fā)生變化，則在所述上層元素的位置發(fā)生變化的過程中實時計算該上層元素的位置并實時設置對應的背景位置屬性的值。

優(yōu)選的，所述實時處理模塊包括：

實時處理單元，用于利用js代碼實時設置對應的背景位置屬性的值。

本發(fā)明提供了一種網(wǎng)頁背景圖的完整實現(xiàn)方法及裝置，其中該方法包括：為網(wǎng)頁中的上層元素添加與所述網(wǎng)頁的背景圖一致的背景圖片；計算所述上層元素在所述網(wǎng)頁中的位置；將所述背景圖片對應的背景位置屬性設置為與所述上層元素的位置對應的值，以使得所述上層元素顯示所述背景圖片中與其位置對應的部分。本申請公開的上述技術特征中，通過為上層元素添加與網(wǎng)頁背景圖相同的背景圖片，進而控制上層元素顯示背景圖片中與上層元素覆蓋的網(wǎng)頁背景圖部分相同的部分，從而使得上層元素的背景與網(wǎng)頁的背景銜接在一起，實現(xiàn)網(wǎng)頁背景圖的完整顯示；且通過上述技術方案無需將上層元素設置為透明背景，由此通過上層元素無法看到下層元素的內容，避免了不同元素內容的混淆，大大提高了用戶體驗。

附圖說明

為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術中的技術方案，下面將對實施例或現(xiàn)有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的實施例，對于本領域普通技術人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。

圖1為本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法的流程圖；

圖2為本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)裝置的結構示意圖。

具體實施方式

下面將結合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領域普通技術人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

請參閱圖1，其示出了本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法的流程圖，可以包括以下步驟：

S11：為網(wǎng)頁中的上層元素添加與網(wǎng)頁的背景圖一致的背景圖片。

該步驟具體可以為編寫上層元素的css樣式，以在該css樣式中添加與網(wǎng)頁的背景圖一致的背景圖片，通過添加該背景圖片并將該背景圖片作為上層元素的背景圖，可以使得上層元素顯示背景圖片的全部或者部分。具體來說，由于背景圖片與網(wǎng)頁的背景圖一致，因此背景圖片的尺寸與網(wǎng)頁的尺寸相同，如果上層元素的尺寸小于網(wǎng)頁的尺寸，對應的上層元素的尺寸也小于背景圖片的尺寸，其只能顯示背景圖片的一部分；如果上層元素的尺寸等于網(wǎng)頁的尺寸，對應的上層元素的尺寸也等于背景圖片的尺寸，其能夠顯示背景圖片的全部；當然，一般情況下，上層元素的尺寸小于網(wǎng)頁的尺寸。

S12：計算上層元素在網(wǎng)頁中的位置。

計算上層元素在網(wǎng)頁中的位置，以確定上層元素覆蓋網(wǎng)頁背景圖的哪部分，進而根據(jù)該位置對應的值使得上層元素顯示背景圖片中與其覆蓋的網(wǎng)頁背景圖相同的部分。

S13：將背景圖片對應的背景位置屬性設置為與上層元素的位置對應的值，以使得上層元素顯示背景圖片中與其位置對應的部分。

其中，設置背景位置屬性(background-position屬性)的值為上層元素的位置對應的值，即為移動背景圖片在上層元素的顯示部分，以使得背景圖片在上層元素的顯示部分與上層元素覆蓋的網(wǎng)頁背景圖的部分相同，也即使得上層元素顯示背景圖片中與其位置對應的部分，從而使得上層元素的背景與網(wǎng)頁的背景銜接在一起就像是一張圖片，實現(xiàn)完整網(wǎng)頁背景圖的顯示。

本申請公開的上述技術特征中，通過為上層元素添加與網(wǎng)頁背景圖相同的背景圖片，進而控制上層元素顯示背景圖片中與上層元素覆蓋的網(wǎng)頁背景圖部分相同的部分，從而使得上層元素的背景與網(wǎng)頁的背景銜接在一起，實現(xiàn)網(wǎng)頁背景圖的完整顯示；且通過上述技術方案無需將上層元素設置為透明背景，由此通過上層元素無法看到下層元素的內容，避免了不同元素內容的混淆，大大提高了用戶體驗。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法，計算上層元素在網(wǎng)頁中的位置，可以包括：

以網(wǎng)頁的左上角為原點形成對應網(wǎng)頁坐標系；

計算上層元素的左上角在網(wǎng)頁坐標系中的橫坐標及縱坐標。

通過將網(wǎng)頁的左上角設置為原點，可以計算出上層元素的左上角在網(wǎng)頁坐標系中的橫坐標和縱坐標，該坐標值即為上層元素的位置對應的值，也即通過將background-position屬性設置為該坐標的值，能夠使得背景圖片中與該坐標值對應的值與上層元素的左上角重合，進而在上層元素中進行顯示對應的部分。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法，還可以包括：

將網(wǎng)頁中的下層元素設置為背景透明的元素。

其中需要說明的是，將網(wǎng)頁中的下層元素設置為背景透明的元素，由此，下層元素能夠與網(wǎng)頁背景圖對應部分實現(xiàn)一致性的顯示，當然，也可以按照本申請公開的上述技術方案對網(wǎng)頁中的下層元素進行處理，由此，即使存在多層元素，也能夠實現(xiàn)網(wǎng)頁背景圖的完整顯示。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法，還可以包括：

如果上層元素的位置發(fā)生變化，則在上層元素的位置發(fā)生變化的過程中實時計算該上層元素的位置并實時設置對應的背景位置屬性的值。

當上層元素被移動時，其位置發(fā)生變化，但是對其背景顯示的設置與其位置固定時的原理是一致的，區(qū)別僅僅在于需要在上層元素的移動過程中實時計算該上層元素的位置并實時設置對應的背景位置屬性的值，以使得其在移動過程中能夠保持顯示背景圖片中與當前位置對應的部分，從而保證其在移動過程中也能夠實現(xiàn)網(wǎng)頁背景圖的完整顯示。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法，實時設置對應的背景位置屬性的值，可以包括：

利用js代碼實時設置對應的背景位置屬性的值。

對于背景位置屬性的實時設置，可以通過js代碼這種腳本語言實現(xiàn)，也即通過編寫對應的js代碼使得上述設置能夠在該代碼的運行條件下實時實現(xiàn)，從而簡化了操作，提高了本發(fā)明實施例提供的上述技術方案的自動化。

本發(fā)明實施例還提供了一種網(wǎng)頁背景圖的完整實現(xiàn)裝置，如圖2所示，可以包括：

添加模塊11，用于為網(wǎng)頁中的上層元素添加與網(wǎng)頁的背景圖一致的背景圖片；

計算模塊12，用于計算上層元素在網(wǎng)頁中的位置；

上層元素設置模塊13，用于將背景圖片對應的背景位置屬性設置為與上層元素的位置對應的值，以使得上層元素顯示背景圖片中與其位置對應的部分。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)裝置，計算模塊可以包括：

計算單元，用于以網(wǎng)頁的左上角為原點形成對應網(wǎng)頁坐標系，計算上層元素的左上角在網(wǎng)頁坐標系中的橫坐標及縱坐標。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)裝置，還可以包括：

下層元素設置模塊，用于將網(wǎng)頁中的下層元素設置為背景透明的元素。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)裝置，還可以包括：

實時處理模塊，用于如果上層元素的位置發(fā)生變化，則在上層元素的位置發(fā)生變化的過程中實時計算該上層元素的位置并實時設置對應的背景位置屬性的值。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)裝置，實時處理模塊可以包括：

實時處理單元，用于利用js代碼實時設置對應的背景位置屬性的值。

本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)裝置中相關部分的說明請參見本發(fā)明實施例提供的一種網(wǎng)頁背景圖的完整實現(xiàn)方法中對應部分的詳細說明，在此不再說明。

對所公開的實施例的上述說明，使本領域技術人員能夠實現(xiàn)或使用本發(fā)明。對這些實施例的多種修改對本領域技術人員來說將是顯而易見的，本文中所定義的一般原理可以在不脫離本發(fā)明的精神或范圍的情況下，在其它實施例中實現(xiàn)。因此，本發(fā)明將不會被限制于本文所示的這些實施例，而是要符合與本文所公開的原理和新穎特點相一致的最寬的范圍。