CN106156371B - 一种实现网页完整背景图的方法及装置 - Google Patents

Abstract

本发明公开了一种网页背景图的完整实现方法及装置，该方法包括：为网页中的上层元素添加与网页的背景图一致的背景图片；计算上层元素在网页中的位置；将背景图片对应的背景位置属性设置为与上层元素的位置对应的值，以使得上层元素显示背景图片中与其位置对应的部分。本申请公开的上述技术特征中，通过为上层元素添加与网页背景图相同的背景图片，进而控制上层元素显示背景图片中与上层元素覆盖的网页背景图部分相同的部分，从而使得上层元素的背景与网页的背景衔接在一起，实现网页背景图的完整显示；且通过上述技术方案无需将上层元素设置为透明背景，由此通过上层元素无法看到下层元素的内容，避免了不同元素内容的混淆，大大提高了用户体验。

Description

一种实现网页完整背景图的方法及装置

技术领域

本发明涉及网页显示技术领域，更具体地说，涉及一种实现网页完整背景图的方法及装置。

背景技术

为了使得web网页对于用户来说更加美观，通常需要在网页存在其他元素的同时实现网页背景图的完整显示。

目前实现web网页完整背景图的一种方法是整个网页的背景图由一张图片显示，网页上其他的元素均可以看见网页的背景图，这样的效果通过将网页上其他元素的背景设置为背景透明就可以简单实现。但是随着网页应用越来越像客户端程序，网页中的元素难免会出现层叠的情况，如果所有元素的背景都是透明的话，元素层叠的情况中就会在上层元素中看到下层元素中的内容，这会使得不同元素之间的内容混淆，大大降低了用户体验。

综上所述，现有技术中用于实现网页背景图完整显示的方案存在当元素层叠时不同元素之间的内容会混淆进而降低用户体验的问题。

发明内容

本发明的目的是提供一种实现网页完整背景图的方法及装置，以解决现有技术中用于实现网页背景图完整显示的方案存在的当元素层叠时不同元素之间的内容会混淆进而降低用户体验的问题。

为了实现上述目的，本发明提供如下技术方案：

一种网页背景图的完整实现方法，包括：

为网页中的上层元素添加与所述网页的背景图一致的背景图片；

计算所述上层元素在所述网页中的位置；

将所述背景图片对应的背景位置属性设置为与所述上层元素的位置对应的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分。

优选的，计算所述上层元素在所述网页中的位置，包括：

以所述网页的左上角为原点形成对应网页坐标系；

计算所述上层元素的左上角在所述网页坐标系中的横坐标及纵坐标。

优选的，还包括：

将所述网页中的下层元素设置为背景透明的元素。

优选的，还包括：

如果所述上层元素的位置发生变化，则在所述上层元素的位置发生变化的过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值。

优选的，实时设置对应的背景位置属性的值，包括：

利用js代码实时设置对应的背景位置属性的值。

一种网页背景图的完整实现装置，包括：

添加模块，用于为网页中的上层元素添加与所述网页的背景图一致的背景图片；

计算模块，用于计算所述上层元素在所述网页中的位置；

上层元素设置模块，用于将所述背景图片对应的背景位置属性设置为与所述上层元素的位置对应的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分。

优选的，所述计算模块包括：

计算单元，用于以所述网页的左上角为原点形成对应网页坐标系，计算所述上层元素的左上角在所述网页坐标系中的横坐标及纵坐标。

优选的，还包括：

下层元素设置模块，用于将所述网页中的下层元素设置为背景透明的元素。

优选的，还包括：

实时处理模块，用于如果所述上层元素的位置发生变化，则在所述上层元素的位置发生变化的过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值。

优选的，所述实时处理模块包括：

实时处理单元，用于利用js代码实时设置对应的背景位置属性的值。

本发明提供了一种网页背景图的完整实现方法及装置，其中该方法包括：为网页中的上层元素添加与所述网页的背景图一致的背景图片；计算所述上层元素在所述网页中的位置；将所述背景图片对应的背景位置属性设置为与所述上层元素的位置对应的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分。本申请公开的上述技术特征中，通过为上层元素添加与网页背景图相同的背景图片，进而控制上层元素显示背景图片中与上层元素覆盖的网页背景图部分相同的部分，从而使得上层元素的背景与网页的背景衔接在一起，实现网页背景图的完整显示；且通过上述技术方案无需将上层元素设置为透明背景，由此通过上层元素无法看到下层元素的内容，避免了不同元素内容的混淆，大大提高了用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本发明实施例提供的一种网页背景图的完整实现方法的流程图；

图2为本发明实施例提供的一种网页背景图的完整实现装置的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，其示出了本发明实施例提供的一种网页背景图的完整实现方法的流程图，可以包括以下步骤：

S11：为网页中的上层元素添加与网页的背景图一致的背景图片。

该步骤具体可以为编写上层元素的css样式，以在该css样式中添加与网页的背景图一致的背景图片，通过添加该背景图片并将该背景图片作为上层元素的背景图，可以使得上层元素显示背景图片的全部或者部分。具体来说，由于背景图片与网页的背景图一致，因此背景图片的尺寸与网页的尺寸相同，如果上层元素的尺寸小于网页的尺寸，对应的上层元素的尺寸也小于背景图片的尺寸，其只能显示背景图片的一部分；如果上层元素的尺寸等于网页的尺寸，对应的上层元素的尺寸也等于背景图片的尺寸，其能够显示背景图片的全部；当然，一般情况下，上层元素的尺寸小于网页的尺寸。

S12：计算上层元素在网页中的位置。

计算上层元素在网页中的位置，以确定上层元素覆盖网页背景图的哪部分，进而根据该位置对应的值使得上层元素显示背景图片中与其覆盖的网页背景图相同的部分。

S13：将背景图片对应的背景位置属性设置为与上层元素的位置对应的值，以使得上层元素显示背景图片中与其位置对应的部分。

其中，设置背景位置属性(background-position属性)的值为上层元素的位置对应的值，即为移动背景图片在上层元素的显示部分，以使得背景图片在上层元素的显示部分与上层元素覆盖的网页背景图的部分相同，也即使得上层元素显示背景图片中与其位置对应的部分，从而使得上层元素的背景与网页的背景衔接在一起就像是一张图片，实现完整网页背景图的显示。

本申请公开的上述技术特征中，通过为上层元素添加与网页背景图相同的背景图片，进而控制上层元素显示背景图片中与上层元素覆盖的网页背景图部分相同的部分，从而使得上层元素的背景与网页的背景衔接在一起，实现网页背景图的完整显示；且通过上述技术方案无需将上层元素设置为透明背景，由此通过上层元素无法看到下层元素的内容，避免了不同元素内容的混淆，大大提高了用户体验。

本发明实施例提供的一种网页背景图的完整实现方法，计算上层元素在网页中的位置，可以包括：

以网页的左上角为原点形成对应网页坐标系；

计算上层元素的左上角在网页坐标系中的横坐标及纵坐标。

通过将网页的左上角设置为原点，可以计算出上层元素的左上角在网页坐标系中的横坐标和纵坐标，该坐标值即为上层元素的位置对应的值，也即通过将background-position属性设置为该坐标的值，能够使得背景图片中与该坐标值对应的值与上层元素的左上角重合，进而在上层元素中进行显示对应的部分。

本发明实施例提供的一种网页背景图的完整实现方法，还可以包括：

将网页中的下层元素设置为背景透明的元素。

其中需要说明的是，将网页中的下层元素设置为背景透明的元素，由此，下层元素能够与网页背景图对应部分实现一致性的显示，当然，也可以按照本申请公开的上述技术方案对网页中的下层元素进行处理，由此，即使存在多层元素，也能够实现网页背景图的完整显示。

本发明实施例提供的一种网页背景图的完整实现方法，还可以包括：

如果上层元素的位置发生变化，则在上层元素的位置发生变化的过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值。

当上层元素被移动时，其位置发生变化，但是对其背景显示的设置与其位置固定时的原理是一致的，区别仅仅在于需要在上层元素的移动过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值，以使得其在移动过程中能够保持显示背景图片中与当前位置对应的部分，从而保证其在移动过程中也能够实现网页背景图的完整显示。

本发明实施例提供的一种网页背景图的完整实现方法，实时设置对应的背景位置属性的值，可以包括：

利用js代码实时设置对应的背景位置属性的值。

对于背景位置属性的实时设置，可以通过js代码这种脚本语言实现，也即通过编写对应的js代码使得上述设置能够在该代码的运行条件下实时实现，从而简化了操作，提高了本发明实施例提供的上述技术方案的自动化。

本发明实施例还提供了一种网页背景图的完整实现装置，如图2所示，可以包括：

添加模块11，用于为网页中的上层元素添加与网页的背景图一致的背景图片；

计算模块12，用于计算上层元素在网页中的位置；

上层元素设置模块13，用于将背景图片对应的背景位置属性设置为与上层元素的位置对应的值，以使得上层元素显示背景图片中与其位置对应的部分。

本发明实施例提供的一种网页背景图的完整实现装置，计算模块可以包括：

计算单元，用于以网页的左上角为原点形成对应网页坐标系，计算上层元素的左上角在网页坐标系中的横坐标及纵坐标。

本发明实施例提供的一种网页背景图的完整实现装置，还可以包括：

下层元素设置模块，用于将网页中的下层元素设置为背景透明的元素。

本发明实施例提供的一种网页背景图的完整实现装置，还可以包括：

实时处理模块，用于如果上层元素的位置发生变化，则在上层元素的位置发生变化的过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值。

本发明实施例提供的一种网页背景图的完整实现装置，实时处理模块可以包括：

实时处理单元，用于利用js代码实时设置对应的背景位置属性的值。

本发明实施例提供的一种网页背景图的完整实现装置中相关部分的说明请参见本发明实施例提供的一种网页背景图的完整实现方法中对应部分的详细说明，在此不再说明。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (8)

1.一种网页背景图的完整实现方法，其特征在于，包括：

为网页中的上层元素添加与所述网页的背景图一致的背景图片；

计算所述上层元素在所述网页中的位置；

将所述背景图片对应的背景位置属性设置为与所述上层元素的位置对应的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分；

所述方法还包括：

如果所述上层元素的位置发生变化，则在所述上层元素的位置发生变化的过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分。

2.根据权利要求1所述的方法，其特征在于，计算所述上层元素在所述网页中的位置，包括：

以所述网页的左上角为原点形成对应网页坐标系；

计算所述上层元素的左上角在所述网页坐标系中的横坐标及纵坐标。

3.根据权利要求2所述的方法，其特征在于，还包括：

将所述网页中的下层元素设置为背景透明的元素。

4.根据权利要求1所述的方法，其特征在于，实时设置对应的背景位置属性的值，包括：

利用js代码实时设置对应的背景位置属性的值。

5.一种网页背景图的完整实现装置，其特征在于，包括：

添加模块，用于为网页中的上层元素添加与所述网页的背景图一致的背景图片；

计算模块，用于计算所述上层元素在所述网页中的位置；

上层元素设置模块，用于将所述背景图片对应的背景位置属性设置为与所述上层元素的位置对应的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分；

所述装置还包括：

实时处理模块，用于如果所述上层元素的位置发生变化，则在所述上层元素的位置发生变化的过程中实时计算该上层元素的位置并实时设置对应的背景位置属性的值，以使得所述上层元素显示所述背景图片中与其位置对应的部分。

6.根据权利要求5所述的装置，其特征在于，所述计算模块包括：

计算单元，用于以所述网页的左上角为原点形成对应网页坐标系，计算所述上层元素的左上角在所述网页坐标系中的横坐标及纵坐标。

7.根据权利要求6所述的装置，其特征在于，还包括：

下层元素设置模块，用于将所述网页中的下层元素设置为背景透明的元素。

8.根据权利要求5所述的装置，其特征在于，所述实时处理模块包括：

实时处理单元，用于利用js代码实时设置对应的背景位置属性的值。

Images