CN105589882B - 网页的页面元素的显示方法和装置 - Google Patents

Abstract

本申请实施例公开了一种网页的页面元素的显示方法和装置。该方法包括：接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素；通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。本申请可以节省banner制作过程中的人力成本，提高在显示网页页面元素时的工作效率。

Description

网页的页面元素的显示方法和装置

技术领域

本申请涉及计算机应用领域，特别是涉及网页的页面元素的显示方法和装置。

背景技术

通常，在网页的页面中会包含各种各样的页面元素，例如，文字、图片或者网页链接等。banner(网幅广告)是网页页面中一种重要的页面元素，并在整个网页页面中占据着重要的显示地位位置。

对于不同的终端来说，由于其显示屏的尺寸(即，宽高比)不同(即，宽度和高度不同)，因此，在显示屏上所显示的网页页面的尺寸也就不同。即使是同一个终端(如，手机或平板电脑)，当其放置的方位方向不同时，在显示屏上所显示的网页页面的尺寸也是不同的。例如，在将手机横着放时在手机显示屏上显示的网页页面的宽度和高度与在将手机竖着放时在手机显示屏上显示的网页页面的宽度和高度都是不同的。

在相关技术中，为了能够适配不同尺寸的网页页面，并在不同尺寸的网页页面上尽量完整地显示出banner中的信息，一般会预先制作不同尺寸的banner以适配不同尺寸的网页页面。客户端根据当前的网页页面的尺寸，调用相应尺寸的banner，并显示在当前的网页页面上。

但是，在实现本申请的过程中，本申请的发明人发现现有技术中至少存在如下问题：针对每一个主题的banner，为了使其适配不同尺寸的网页页面，需要制作多个不同的尺寸。而对于一个网站来说(如，购物网站或门户网站)，通常都需要制作会涉及大量主题的banner，因此也就需要制作大量的不同尺寸的banner。由于大量的banner的制作过程一般是由美工人员手工完成的，因此，会消耗大量的人力成本，明显地降低了工作效率。

发明内容

为了解决上述技术问题，本申请实施例提供了网页的页面元素的显示方法和装置，以节省banner制作过程中的人力成本，提高在显示网页页面元素时的工作效率。

本申请实施例公开了如下技术方案：

一种网页的页面元素的显示方法，包括：

接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素；

通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。

优选的，所述当前页面的尺寸为当前页面的宽度。

优选的，所述通过CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的宽度匹配，包括：

通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的宽度与当前页面的宽度匹配；

将所述背景图片的显示区域渲染在当前页面上；

其中，所述背景图片的显示区域与所述背景图片之间左对齐，并且，所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离满足预设的第一距离条件；或者，所述背景图片的显示区域与所述背景图片之间右对齐，并且，所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离满足预设的第二距离条件；或者，所述背景图片的显示区域与所述背景图片之间居中对齐，并且，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

优选的，当客户端响应于用户对当前的网页页面进行的页面缩小的操作时，如果用户向左拖动拉动当前的网页页面，所述第二距离大于所述第一距离，如果用户向右拖动拉动当前的网页页面，所述第一距离大于所述第二距离。

优选的，当客户端响应于用户对当前的网页页面进行的页面放大的操作时，如果用户向左拖动拉动当前的网页页面，所述第一距离大于所述第二距离，如果用户向右拖动拉动当前的网页页面，所述第二距离大于所述第一距离。

一种网页的页面元素的显示装置，包括：

接收单元，用于接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个网页页面元素；

显示单元，用于通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。

优选的，所述当前页面的尺寸为当前页面的宽度。

优选的，所述显示单元包括：

第一确定子单元，用于通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的宽度与当前页面的宽度匹配；

第一渲染子单元，用于将所述背景图片的显示区域渲染在当前页面上；

其中，所述背景图片的显示区域与所述背景图片之间左对齐，并且，所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离满足预设的第一距离条件；或者，所述背景图片的显示区域与所述背景图片之间右对齐，并且，所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离满足预设的第二距离条件；或者，所述背景图片的显示区域与所述背景图片之间居中对齐，并且，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

优选的，当响应于用户对当前的网页页面进行的页面缩小的操作时，如果用户向左拖动拉动当前的网页页面，所述第二距离大于所述第一距离，如果用户向右拖动拉动当前的网页页面，所述第一距离大于所述第二距离。

优选的，当客户端响应于用户对当前的网页页面进行的页面放大的操作时，如果用户向左拖动拉动当前的网页页面，所述第一距离大于所述第二距离，如果用户向右拖动拉动当前的网页页面，所述第二距离大于所述第一距离。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

将banner拆分为可通过CSS技术对其进行控制的一个页面元素，即，图片。这样，相关技术人员并不需要为每一个banner制作不同的尺寸，而仅需要制作一个尺寸的背景图片即可。当在不同尺寸的当前页面显示banner时，由于banner被拆分为了背景图片和文字图片，因此，借助于CSS技术，可以先使背景图片与当前页面的尺寸匹配，再将文字图片显示在该背景图片上。从而节省了banner制作过程中的人力成本，提高了工作效率。

附图说明

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

图1示意性地示出了本发明的实施方式可以在其中实施的示例性应用场景为；

图2为本申请提供的一种网页的页面元素的显示方法的一个实施例的流程图；

图3为本申请中对背景图片进行裁剪处理的一种操作示意图；

图4为本申请中对背景图片进行裁剪处理的另一种操作示意图；

图5为本申请中对背景图片进行裁剪处理的另一种操作示意图；

图6为本申请中用户对当前页面进行放大或缩小操作的一种操作示意图；

图7为本申请中当用户对当前页面进行放大或缩小操作时背景图片的一种显示示意图；

图8为本申请中当用户对当前页面进行放大或缩小操作时背景图片的另一种显示示意图；

图9为本申请提供的一种网页的页面元素的显示装置的一个实施例的结构图；

图10为本申请中显示单元的一种结构示意图；

图11为本申请中显示单元的另一种结构示意图。

具体实施方式

通常，每一个banner是由两个部分构成的，一个是背景图片，另一个是文字图片。在现有技术中，为了适配不同尺寸的页面，美工人员需要为每一个banner制作不同的尺寸。即，先设计不同尺寸的背景图片，并在不同尺寸的背景图片上对相关的文字内容进行文字样式的设计。服务器将一个banner的不同尺寸都发送给客户端，由客户端根据当前页面的尺寸，从中选择一个尺寸匹配的banner进行显示。

本申请实施例提供了网页的页面元素的显示方法和装置。在本申请中，将每一个banner拆分为背景图片和文字图片两个部分，并且，只需要为每一个banner制作一个背景图片以及相关的文字图片。请参阅图1所示，图1示意性地示出了本发明的实施方式可以在其中实施的示例性应用场景。在数据库10保存了某网站中所有网页上的banner的背景图片以及相关的文字图片，当客户端30向服务器20发送显示网页A的请求时，作为响应，服务器20从数据库中10读取banner11的背景图片111以及文字图片111，并向客户端30发送用于描述banner11的背景图片111以及至少一个文字图片112，其中，banner11为网页A中的一个页面元素。客户端30通过CSS(级联样式表，Cascading Style Sheets)技术先将背景图片111显示在网页A的当前页面21上，无论网页A的当前页面21的尺寸为多少，CSS技术都可以使显示在当前页面21上的背景图片111与网页A的当前页面12的尺寸匹配。客户端30再将文字图片112显示在背景图片111上。服务器20可以是Web服务器，也可以是其他类型的服务器，例如APP服务器。本领域技术人员可以理解，图1所示的示意图仅是本发明的实施方式可以在其中得以实现的一个示例。本发明实施方式的应用范围不受到该框架任何方面的限制。

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图对本申请实施例进行详细描述。

方法实施例

请参阅图2，其为本申请提供的网页的页面元素的显示装置的一个实施例的流程图，该方法包括以下步骤：

步骤201：接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素。

步骤202：通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。

CSS是一种用来表现HTML(超文本标记语言)或XML(可扩展标记语言)等文件样式的计算机语言，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的页面元素的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对页面元素的样式进行编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

在本申请中，是将banner进一步拆分为可通过CSS技术对其进行控制的一个页面元素，即，图片。进而借助于CSS技术，可以使背景图片与当前页面的尺寸匹配。最后将文字图片显示在背景图片的固定位置上。例如，可以采取左对齐的方式将文字图片显示在背景图片的左上角。当背景图片的尺寸随着当前页面的尺寸的不同而发生变化时，文字图片的尺寸并不会发生变化，并且，其在背景图片上的显示位置也是固定不变的。其中，CSS技术可以使背景图片与当前页面的宽度匹配，也可以使背景图片与当前页面的高度匹配，还可以使背景图片同时与当前页面的宽度和高度匹配。

针对banner来说，由于其形状通常为长条形，并且该长条形的横向宽度要远远大于纵向高度，因此，在实际应用中，主要考虑的是该banner是否与当前页面的宽度是否匹配的问题。

在本发明的一个优选实施方式中，通过CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的宽度匹配。

对于背景图片来说，其包含有宽度和高度两个维度。可以保持背景图片的高度这个维度不变，而是通过现有的CSS技术确定背景图片在宽度这个维度上的显示区域，从而使显示区域的宽度与当前页面的宽度匹配。

其中，当背景图片的宽度大于当前页面的宽度时，对背景图片的横向宽度进行裁剪，背景图片经过裁剪处理后所得到的一部分区域即为显示区域，该显示区域的宽度与当前页面的宽度是匹配的。当背景图片的宽度小于当前页面的宽度时，对背景图片的横向宽度进行留白，背景图片经过留白处理后即成为显示区域，该显示区域的宽度与当前页面的宽度是匹配的。

当进行裁剪处理时，可以根据背景图片中的核心内容所在的位置而确定背景图片中哪部分区域为显示区域。

例如，如果背景图片中的核心内容主要体现在该背景图片的左边，可以将背景图片的右边区域裁剪掉，从而保留左边区域作为显示区域。如图3所示，其中，背景图片的显示区域与背景图片之间左对齐，并且，背景图片的显示区域的左边界与背景图片的左边界之间的距离满足预设的第一距离条件。

如果背景图片中的核心内容主要体现在该背景图片的右边，可以将背景图片的左边区域裁剪掉，保留右边区域作为显示区域。如图4所示，其中，背景图片的显示区域与背景图片之间右对齐，并且，背景图片的显示区域的右边界与背景图片的右边界之间的距离满足预设的第二距离条件。

如果背景图片中的核心内容主要体现在该背景图片的中间，可以将背景图片的左右两边区域裁剪掉，保留中间区域作为显示区域。如图5所示，其中，背景图片的显示区域与所述背景图片之间居中对齐，并且，将背景图片的显示区域的左边界与背景图片的左边界之间的距离作为第一距离，将背景图片的显示区域的右边界与背景图片的右边界之间的距离作为第二距离，第一距离与第二距离的比值满足预设的比值条件。

其中，预设的第一距离条件和第二距离条件可以分别为一个距离阈值，也可以分别为一个距离区间。当背景图片的显示区域的左(右)边界与背景图片的左(右)边界之间的距离等于该距离阈值或者位于该距离区间时，即为符合第一(第二)距离条件。

预设的比值条件可以为一个比值阈值，也可以为一个比值区间。当第一距离与第二距离的比值等于该比值阈值或者位于该比值区间时，即为符合比值条件。

当然，除了裁剪之外，上述处理方式也同样适用于对背景图片的留白处理。即，可以在背景图片的左边界进行留白，也可以在背景图片的右边界进行留白，还可以在背景图片的左右两边进行留白。

需要说明的是，本申请中并不限制背景图片的宽度，也就是说，背景图片可以是任意宽度的。例如，可以将背景图片的宽度设置为最大banner(即，与最大页面尺寸匹配的banner)的宽度，后续可以对该背景图片在横向宽度上进行裁剪处理，从而使其宽度与当前页面的宽度匹配。当然，也可以将背景图片的宽度设置为最小banner(即，与最小页面尺寸匹配的banner)的宽度，后续可以对该背景图片在横向宽度上进行留白处理，从而使其宽度与当前页面的宽度匹配。

另外，当用户对当前页面进行页面放大或缩小操作时，当前页面的尺寸就会动态地发生变化。例如，当用户向左或向右拉动当前页面时，如图6所示，当前页面的宽度会动态地发生变化，即，当前页面的宽度在不断地进行大小切换。为了使banner的宽度与当前页面的宽度匹配，在当前页面的宽度进行大小切换的同时，banner的宽度也需要随之进行大小切换。

从显示的效果来看，当用户拉动当前页面向左或向右移动时，位于当前页面中的banner也会随之向左或向右移动。为了使banner每次都可以自然和流畅地移动，一种优选的方式是使banner的移动幅度小于当前页面的移动幅度。

为了使banner的移动幅度小于当前页面的移动幅度，在本申请的一个优选实施方式中，背景图片的显示区域与所述背景图片之间是居中对齐的，如果用户通过向左拉动当前页面对当前页面进行页面缩小操作，则第二距离(即，背景图片的显示区域的右边界与背景图片的右边界之间的距离)大于第一距离(即，背景图片的显示区域的左边界与背景图片的左边界之间的距离)，进而使banner达到向左缓动的效果。如果用户通过向右拉动当前页面对当前页面进行页面缩小操作，则第一距离大于第二距离，进而使banner达到向右缓动的效果，如图7所示。

如果用户通过向左拉动当前页面对当前页面进行页面放大操作，则第一距离大于第二距离，进而使banner达到向左缓动的效果。如果用户通过向右拉动当前页面对当前页面进行页面放大操作，则第二距离大于第二距离，进而使banner达到向右缓动的效果。如图8所示。

另外，当背景图片的宽度随着当前页面的宽度的缩小而不断缩小时，由于文字图片的尺寸并不发生变化(即，宽度不会发生变化)，因此，可能会出现文字图片的宽度大于背景图片的宽度，进而文字图片盖过背景图片的问题。为了避免该问题的出现，可以为背景图片的宽度设定最小值，当背景图片的宽度达到最小值时，该背景图片的宽度不再继续缩小。此时，如果用户再继续拖动当前页面进行页面缩小操作，背景图片的宽度保持为最小值。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

将banner拆分为可通过CSS技术对其进行控制的一个页面元素，即，图片。这样，相关技术人员并不需要为每一个banner制作不同的尺寸，而仅需要制作一个尺寸的背景图片即可。当在不同尺寸的当前页面显示banner时，由于banner被拆分为了背景图片和文字图片，因此，借助于CSS技术，可以先使背景图片与当前页面的尺寸匹配，再将文字图片显示在该背景图片上。从而节省了banner制作过程中的人力成本，提高了工作效率。

装置实施例

与上述一种网页的页面元素的显示方法相对应，本申请实施例还提供了一种网页的页面元素的显示装置。请参阅图9，其为本申请提供的网页的页面元素的显示装置的一个实施例的结构图，该装置包括接收单元901和显示单元902。下面结合该装置的工作原理进一步介绍其内部结构以及连接关系。

接收单元901，用于接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个网页页面元素；

显示单元902，用于通过级联样式表CSS技术将所述背景图片显示在当前页面上，以使得显示在当前页面上的所述背景图片与当前页面的尺寸匹配，并将所述文字图片显示在所述背景图片上。

在本申请的一个优选实施方式中，所述当前页面的尺寸为当前页面的宽度。

在本申请的另一个优选实施方式中，如图10所示，显示单元902包括：

第一确定子单元9021，用于通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的宽度与当前页面的宽度匹配；

第一渲染子单元9022，用于将所述背景图片的显示区域渲染在当前页面上；

其中，所述背景图片的显示区域与所述背景图片之间左对齐，并且，所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离满足预设的第一距离条件；或者，所述背景图片的显示区域与所述背景图片之间右对齐，并且，所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离满足预设的第二距离条件；或者，所述背景图片的显示区域与所述背景图片之间居中对齐，并且，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

在本申请的一个优选实施方式中，当响应于用户对当前的网页页面进行的页面缩小的操作时，如果用户向左拖动拉动当前的网页页面，所述第二距离大于所述第一距离，如果用户向右拖动拉动当前的网页页面，所述第一距离大于所述第二距离。在本申请的另一个优选实施方式中，当客户端响应于用户对当前的网页页面进行的页面放大的操作时，如果用户向左拖动拉动当前的网页页面，所述第一距离大于所述第二距离，如果用户向右拖动拉动当前的网页页面，所述第二距离大于所述第一距离。

由上述实施例可以看出，与现有技术相比，本申请的优点在于：

将banner拆分为可通过CSS技术对其进行控制的一个页面元素，即，图片。这样，相关技术人员并不需要为每一个banner制作不同的尺寸，而仅需要制作一个尺寸的背景图片即可。当在不同尺寸的当前页面显示banner时，由于banner被拆分为了背景图片和文字图片，因此，借助于CSS技术，可以先使背景图片与当前页面的尺寸匹配，再将文字图片显示在该背景图片上。从而节省了banner制作过程中的人力成本，提高了工作效率。

所述领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述到的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性、机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，可以采用软件功能单元的形式实现。

需要说明的是，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上对本申请所提供的网页的页面元素的显示方法和装置进行了详细介绍，本文中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (16)

1.一种网页的页面元素的显示方法，其特征在于，包括：

接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素；

通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的尺寸与当前页面的尺寸匹配，将所述背景图片的显示区域渲染在当前页面上，并将所述文字图片显示在所述背景图片上；其中，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离；当用户向左拖动拉动当前的网页页面对当前页面进行页面缩小操作时，所述第二距离大于所述第一距离；当用户向右拖动拉动当前的网页页面对当前页面进行页面缩小操作时，所述第一距离大于所述第二距离。

2.根据权利要求1所述的方法，其特征在于，所述当前页面的尺寸为当前页面的宽度。

3.根据权利要求1所述的方法，其特征在于，所述背景图片的显示区域与所述背景图片之间居中对齐。

4.根据权利要求1所述的方法，其特征在于，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

5.一种网页的页面元素的显示方法，其特征在于，包括：

接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个页面元素；

通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的尺寸与当前页面的尺寸匹配，将所述背景图片的显示区域渲染在当前页面上，并将所述文字图片显示在所述背景图片上；其中，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离；当用户向左拖动拉动当前的网页页面对当前页面进行页面放大操作时，所述第一距离大于所述第二距离；当用户向右拖动拉动当前的网页页面对当前页面进行页面放大操作，所述第二距离大于所述第一距离。

6.根据权利要求5所述的方法，其特征在于，所述当前页面的尺寸为当前页面的宽度。

7.根据权利要求5所述的方法，其特征在于，所述背景图片的显示区域与所述背景图片之间居中对齐。

8.根据权利要求5所述的方法，其特征在于，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

9.一种网页的页面元素的显示装置，其特征在于，包括：

接收单元，用于接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个网页页面元素；

显示单元，用于通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的尺寸与当前页面的尺寸匹配，将所述背景图片的显示区域渲染在当前页面上，并将所述文字图片显示在所述背景图片上；其中，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离；当用户向左拖动拉动当前的网页页面对当前页面进行页面缩小操作时，所述第二距离大于所述第一距离；当用户向右拖动拉动当前的网页页面对当前页面进行页面缩小操作时，所述第一距离大于所述第二距离。

10.根据权利要求9所述的装置，其特征在于，所述当前页面的尺寸为当前页面的宽度。

11.根据权利要求9所述的装置，其特征在于，所述背景图片的显示区域与所述背景图片之间居中对齐。

12.根据权利要求9所述的装置，其特征在于，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

13.一种网页的页面元素的显示装置，其特征在于，包括：

接收单元，用于接收服务器发送的背景图片以及文字图片，所述背景图片以及文字图片用于描述一个网页页面元素；

显示单元，用于通过CSS技术确定所述背景图片的显示区域，以使得所述背景图片的显示区域的尺寸与当前页面的尺寸匹配，将所述背景图片的显示区域渲染在当前页面上，并将所述文字图片显示在所述背景图片上；其中，将所述背景图片的显示区域的左边界与所述背景图片的左边界之间的距离作为第一距离，将所述背景图片的显示区域的右边界与所述背景图片的右边界之间的距离作为第二距离；当用户向左拖动拉动当前的网页页面对当前页面进行页面放大操作时，所述第一距离大于所述第二距离；当用户向右拖动拉动当前的网页页面对当前页面进行页面放大操作时，所述第二距离大于所述第一距离。

14.根据权利要求13所述的装置，其特征在于，所述当前页面的尺寸为当前页面的宽度。

15.根据权利要求13所述的装置，其特征在于，所述背景图片的显示区域与所述背景图片之间居中对齐。

16.根据权利要求13所述的装置，其特征在于，所述第一距离与所述第二距离之间的比值满足预设的比值条件。

Images