CN105468656B - 网页背景图像生成方法和系统 - Google Patents

Abstract

本发明提供一种网页背景图像生成方法和系统，其中方法包括如下步骤：根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；将两个所述HTML标签进行叠加获得网页背景图像。本发明的技术方案，通过背景图像错位排列和双HTML标签叠加方式，实现了以最少的图像请求数量得到网页的背景图像，同时保留了背景图像自适应模块的灵活性，提高了页面加载速度。

Description

网页背景图像生成方法和系统

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页背景图像生成方法和系统。

背景技术

在网页背景图像制作中，一般自适应模块功能的实现方法是把设计好的内容样式模块，按照井字的形状切割成9张图片，再通过编写CSS(层叠样式表，一种用来表现HTML或XML等文件样式的计算机语言)代码，把它们组成一个可以自适应宽高的模块，目的是为了将上下左右四个方向中间的内容，能够通过CSS的背景属性来实现内容样式模块的自适应内容宽高，当要加载这个背景图像时，在网页所显示的图片都是需要通过网络连接来请求，单独每一张图片是一个请求，因此要加载这些图片，需要请求的数量一般为9次，这就导致了图片传输速度慢，页面加载速度慢。

为了减少请求数量，还有方法是按照三字的形状将背景图像分别切割成上中下3张单独图片，这样请求图片的数量一般为3次，虽然减少了请求数量，但内容模块不够灵活缺，无法自适应内容的宽度，扩展性差。

综上所述，现有的网页背景图像制作方案，一般都是以增加请求图片的数量保证自适应模块功能，以降低自适应模块功能来减少请求图片的数量，难以在保证内容模块自适应功能情况下降低加载图片请求的数量。

发明内容

基于此，有必要针对上述问题，提供一种在保证内容模块自适应功能的同时也能有效降低加载图片请求的数量的网页背景图像生成方法和系统。

一种网页背景图像生成方法，包括如下步骤：

根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；

将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；

根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；

将两个所述HTML标签进行叠加获得网页背景图像。

一种网页背景图像生成系统，包括：

排版模块，用于根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；

错位模块，用于将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；

重复模块，用于根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；

叠加模块，用于将两个所述HTML标签进行叠加获得网页背景图像。

上述网页背景图像生成方法和系统，对背景图像切割后以十字型方式进行排版；通过两个HTML标签作为背景图像载体，将错位排列背景图像进行重复延伸后叠加获得网页背景图像，通过背景图像错位排列和双HTML标签叠加方式，实现了以最少的图像请求数量得到网页的背景图像，同时保留了背景图像自适应模块的灵活性，提高了页面加载速度。

附图说明

图1为本发明实施例网页背景图像生成方法应用系统结构示意图；

图2为一个实施例的网页背景图像生成方法流程图；

图3为一个实施例的背景图像示意图；

图4为十字方式排版的背景图像示意图；

图5为两个HTML标签的示意图；

图6为两个HTML标签错位排列的示意图；

图7为图6所示的两个HTML标签叠加后得到的背景图像部分示意图；

图8为叠加得到的背景图像效果图；

图9为一个实施例的网页背景图像生成系统结构示意图；

图10为另一个实施例的网页背景图像生成系统结构示意图；

图11为能实现本发明实施例的一个计算机系统的模块图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例所提供的网页背景图像生成方法可应用于如图1所示的系统中，请参考图1所示，终端设备02可以是诸如个人电脑、智能手机、平板电脑、个人数字助理等设备，但并不局限于此。终端设备02可以通过有线或无线方式等方式接入公共网络，如Internet网等，与服务器04进行通信。终端设备02上可运行浏览器等网页访问工具，用户利用浏览器等可以通过internet网络访问服务器04，并获取所需的背景图像数据；终端设备02的浏览器加载到背景图像数据后，经过相应处理后最终显示为用户所需的网页。

所述终端设备02可以是指一个设备也可以是指多个设备；服务器04是指实现各种后台功能的服务器设备，可以是指一个设备也可以是指多个设备，在本申请中，更多的是指多个设备。

参见图2所示，图2为一个实施例的网页背景图像生成方法流程图，包括如下步骤：

步骤S10，根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版。

在此步骤中，为实现自适应模块功能，首先对背景图像进行图像切割处理，然后以十字型方式进行排版，以确保排版后的图像中需要重复的边缘图片在同一个方向上的180°范围内没有任何遮挡的图像，使得对图像进行重复延伸时不会遇到冲突的图像。

在一个实施例中，步骤S10的处理过程，具体可以包括如下：

(1)根据自适应内容样式模块将原始背景图像按照井字形划分为9张图片；其中，图像顶部和底部的高度和值为图像高度的二分之一，图像左部和右部的宽度和值为图像宽度的二分之一。

参考图3，图3为一个实施例的背景图像示意图，将背景图像按照井字形划分为9张图片，每张图片对应自适应的模块，分别为：mdl_t_c，mdl_b_c，mdl_c_r，mdl_c_l，mdl_t_l，mdl_b_l，mdl_t_r，mdl_b_r，中心图像(空白)部分。其中，mdl＝module(模块)，t＝top(顶部边缘)，c＝content(内容)，b＝bottom(底部边缘)，r＝right(右侧边缘)，l＝left(左侧边缘)，中心图像属于纯色的部分，这里划分有个要求，就是La+Lc＝Lb，Ha+Hc＝Hb。

(2)通过CSS工具将9张图片按照十字型方式进行排版并组合在一起；其中，左上、右上、左下、右下部分的图片排列到图像的中心区域。

参考图4所示，图4为十字方式排版的背景图像示意图，利用CSS sprites图像排版，将mdl_t_l，mdl_b_l，mdl_t_r，mdl_b_r部分的图像组合在背景图像的中心图像上，在此可以定义为Sprites图像错位排列。可以看出，排版后的背景图像，每个需要重复的边缘图片mdl_t_c，mdl_b_c，mdl_c_r，mdl_c_l在同一个方向上180°范围内没有任何遮挡的图像，从而可以方便使用CSS属性background-image：repeat-x；或background-image：repeat-y进行纵向或横向上的重复；重复过程中就不会遇到冲突的图像；而原来四个角的图片mdl_t_l，mdl_b_l，mdl_t_r，mdl_b_r切割后放到中间属于纯色的部分，不影响这部分图像的元素，同时四个角的图像可以在图像重复后用于后续调用，在自适应调整中恢复出四个角的图像。

步骤S20，将排版后获得的组合背景图像应用到两个HTML(HyperText Markuplanguage，超级文本标记语言)标签中，并将两个HTML标签中的背景图像进行错位排列。

在此步骤中，利用两个HTML标签作为背景图像的载体并进行错位排列，作为一个实施例，步骤S20可以具体包括如下：

首先创建两个HTML标签作为背景图像的载体；参考图5所示，两个标签分别为标签1、标签2，可以将背景图像的模块应用到标签1、标签2中，例如，将mdl_t_c部分的图片分别应用到标签1、标签2中，可以实现顶部边缘的错位排列。

然后通过CSS工具将排版后的组合背景图像分别载入两个HTML标签中；再将两个HTML标签中的背景图像以图像高度或宽度的二分之一的间隔进行错位排列。

参考图6所示，图6中列举的是两个HTML标签错位排列的示意图，两个HTML标签中的背景图像错位的间隔为图像宽度的二分之一。

步骤S30，根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸。

在此步骤中，所述重复延伸是指在HTML标签中沿着某个延伸的方向重复放置多个相同的背景图像；可以利用CSS工具的重复属性分别对两个所述HTML标签中的背景图像在纵向上或横向上进行重复延伸。

参考图6所示，图中是以横向上的延伸为例，使用CSS属性background-image：repeat-x；或background-image：repeat-y；可以进行无限延伸，而且不会遇到冲突的图像，如图中mdl_t_c，mdl_b_c，部分的图片，就可以在横向上进行重复延伸；同理的，mdl_c_r，mdl_c_l，mdl_t_l部分的图片，就可以在纵向上进行重复延伸，这样就可以实现自适应模块功能。

上述步骤中，通过两个用于叠加的HTML标签进行重复延伸，从而可以利用CSS属性border-image来实现图像模块上下左右，四个方向上的图片自适应宽度，从而可以应用各种格式的背景图像，可以实现JPG等图片格式的兼容。

进一步地，本发明实施例的网页背景图像生成方法在重复延伸前，还可以包括：

步骤S40，根据自适应模块输入内容大小确定自适应调整的宽度或高度，并根据该宽度或高度计算背景图像的重复次数。

此过程中，主要是根据实际输入内容大小，确定自适应中要调整的宽度或高度，进而确定进行重复延伸的次数。

步骤S50，将两个所述HTML标签进行叠加获得网页背景图像。

在此步骤中，通过双HTML标签叠加方式，重新组合出背景图像，由于背景图像在HTML标签中可以无限延伸，这样就可以实现了自适应模块的功能，但实质上仅仅使用了一张背景图像。

在一个实施例中，步骤S50的叠加方法可以如下：

(1)根据图像请求加载所述两个HTML标签。

具体的，由于通过两个HTML标签作为背景图像的载体，实际加载图像时，不需要加载背景图像的各个内容模块对应的图片，而是直接加载了两个HTML标签中的组合的背景图像，先将背景图像应用到HTML标签，再将两个HTML标签进行叠加得到网页背景图像，这样实际请求的背景图像数量只有一个，提高了页面图像数据的加载速度。

(2)通过CSS样式将两个所述HTML标签进行无缝叠加获得网页背景图像。

具体的，通过两个HTML标签的无缝叠加就可以获得用户所需的网页背景图像，以最少的图像请求数量，得到网页的背景图像，同时，还可以保留了背景图像自适应模块的灵活性，仍可以实现内容模块的宽度和高度的自适应调整。

参考图8所示，图8为图7所示的两个HTML标签叠加后得到的背景图像部分示意图，通过不断的重复延伸就可以实现内容模块的宽度自适应调整，如mdl_t_c，mdl_b_c部分的图像就可以一直在横向上重复延伸，由于两个背景图像刚好错位排列，叠加后刚好形成了不断变长的区域，从而实现了内容模块的宽度自适应调整。

对于叠加后形成的背景图像，可以再通过CSS属性对背景图像的各个内容模块进行属性设置，在最终背景图像中确定是否显示该模块内容，同时可以根据实际需求，调用背景图像中的元素，如将图中中间部分的图像统一颜色显示，调用图7中处于两个标签两端位置的四个角的图片叠加到四个角的位置(如图中箭头所示)，可以实现四个圆角的形状，通过对标签中的图像进行设置后，再通过浏览器来显示页面可以得到如图8所示的背景图像效果图，在图8所示的网页背景图像中，可以根据内容区域的文字数量进行自适应调整，仅通过一个背景图像就可以实现自适应模块功能。

目前，网页制作中较多使用CSS3的多背景属性(CSS3background-image)的技术方案来减少页面背景图像的请求数量，只需要一次图片请求，但这种方案，但这种方案存在浏览器的兼容性有问题，例如在IE6～IE9上存在明显兼容性有问题，导致样式显示不完整。而本发明提供的网页背景图像生成方法，能够兼容所有的浏览器，而且可以应用各种格式的背景图像，实现JPG等图片格式的兼容，在保证内容模块自适应功能情况下明显降低图片请求的数量。

参见图9所示，图9为一个实施例的网页背景图像生成系统结构示意图，包括：

排版模块10，用于根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；

错位模块20，用于将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；

重复模块30，用于根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；

叠加模块50，用于将两个所述HTML标签进行叠加获得网页背景图像。

在一个实施例中，所述排版模块10进一步还可以用于：

根据自适应内容样式模块将原始背景图像按照井字形划分为9张图片；其中，图像顶部和底部的高度和值为图像高度的二分之一，图像左部和右部的宽度和值为图像宽度的二分之一；通过CSS工具将9张图片按照十字型方式进行排版并组合在一起；其中，左上、右上、左下、右下部分的图片排列到图像的中心区域。

在一个实施例中，所述错位模块20进一步用于：

创建两个HTML标签作为背景图像的载体；通过CSS工具将排版后的组合背景图像分别载入两个HTML标签中；将两个HTML标签中的背景图像以图像高度或宽度的二分之一的间隔进行错位排列。

在一个实施例中，所述重复模块30进一步还可以用于：

利用CSS工具的重复属性分别对两个所述HTML标签中的背景图像在纵向上或横向上进行重复延伸。

在一个实施例中，参考图10所示，本发明实施例的网页背景图像生成系统，在重复模块30前还可以包括：

计算模块40，用于根据自适应模块输入内容大小确定自适应调整的宽度或高度，并根据该宽度或高度计算背景图像的重复次数。

在一个实施例中，所述叠加模块50进一步还可以用于：

根据图像请求加载所述两个HTML标签；通过CSS样式将两个所述HTML标签进行无缝叠加获得网页背景图像。

本发明的网页背景图像生成系统与本发明的网页背景图像生成方法一一对应，在上述网页背景图像生成方法的实施例阐述的技术特征及其有益效果均适用于网页背景图像生成系统的实施例中，特此声明。

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

图11为能实现本发明实施例的一个计算机系统的模块图。该计算机系统900只是一个适用于本发明的计算机环境的示例，不能认为是提出了对本发明的使用范围的任何限制。计算机系统900也不能解释为需要依赖于或具有图示的示例性的计算机系统900中的一个或多个部件的组合。

图9中示出的计算机系统900是一个适合用于本发明的计算机系统的例子。具有不同子系统配置的其它架构也可以使用。

如图9所示，计算机系统900包括处理器910、存储器920和系统总线922。包括存储器920和处理器910在内的各种系统组件连接到系统总线922上。处理器910是一个用来通过计算机系统中基本的算术和逻辑运算来执行计算机程序指令的硬件。存储器920是一个用于临时或永久性存储计算程序或数据(例如，程序状态信息)的物理设备。系统总线920可以为以下几种类型的总线结构中的任意一种，包括存储器总线或存储控制器、外设总线和局部总线。处理器910和存储器920可以通过系统总线922进行数据通信。其中存储器920包括只读存储器(ROM)或闪存(图中都未示出)，以及随机存取存储器(RAM)，RAM通常是指加载了操作系统和应用程序的主存储器。

计算机系统900还包括显示接口930(例如，图形处理单元)、显示设备940(例如，液晶显示器)、音频接口950(例如，声卡)以及音频设备960(例如，扬声器)。显示设备940和音频设备960是用于体验多媒体内容的媒体设备。

计算机系统900一般包括一个存储设备970。存储设备970可以从多种计算机可读介质中选择，计算机可读介质是指可以通过计算机系统900访问的任何可利用的介质，包括移动的和固定的两种介质。例如，计算机可读介质包括但不限于，闪速存储器(微型SD卡)，CD-ROM，数字通用光盘(DVD)或其它光盘存储、磁带盒、磁带、磁盘存储或其它磁存储设备，或者可用于存储所需信息并可由计算机系统900访问的任何其它介质。

计算机系统900还包括输入装置980和输入接口990(例如，IO控制器)。用户可以通过输入装置980，如键盘、鼠标、显示装置940上的触摸面板设备，输入指令和信息到计算机系统900中。输入装置980通常是通过输入接口990连接到系统总线922上的，但也可以通过其它接口或总线结构相连接，如通用串行总线(USB)。

计算机系统900可在网络环境中与一个或者多个网络设备进行逻辑连接。网络设备可以是个人电脑、服务器、路由器、智能电话、平板电脑或者其它公共网络节点。计算机系统900通过局域网(LAN)接口1000或者移动通信单元1010与网络设备相连接。局域网(LAN)是指在有限区域内，例如家庭、学校、计算机实验室、或者使用网络媒体的办公楼，互联组成的计算机网络。WiFi和双绞线布线以太网是最常用的构建局域网的两种技术。WiFi是一种能使计算机系统900间交换数据或通过无线电波连接到无线网络的技术。移动通信单元1010能在一个广阔的地理区域内移动的同时通过无线电通信线路接听和拨打电话。除了通话以外，移动通信单元1010也支持在提供移动数据服务的2G，3G或4G蜂窝通信系统中进行互联网访问。

应当指出的是，其它包括比计算机系统900更多或更少的子系统的计算机系统也能适用于发明。

如上面详细描述的，适用于本发明的计算机系统900能执行网页背景图像生成方法的指定操作。计算机系统900通过处理器910运行在计算机可读介质中的软件指令的形式来执行这些操作。这些软件指令可以从存储设备970或者通过局域网接口1000从另一设备读入到存储器920中。存储在存储器920中的软件指令使得处理器910执行上述的网页背景图像生成方法。此外，通过硬件电路或者硬件电路结合软件指令也能同样实现本发明。因此，实现本发明并不限于任何特定硬件电路和软件的组合。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (12)

1.一种网页背景图像生成方法，其特征在于，包括如下步骤：

根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；

将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；

根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；

将两个所述HTML标签进行叠加获得网页背景图像；

其中，所述根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版的步骤包括：

根据自适应内容样式模块将原始背景图像按照井字形划分为9张图片；其中，图像顶部和底部的高度和值为图像高度的二分之一，图像左部和右部的宽度和值为图像宽度的二分之一；

通过CSS工具将9张图片按照十字型方式进行排版并组合在一起；其中，左上、右上、左下、右下部分的图片排列到图像的中心区域。

2.根据权利要求1所述的网页背景图像生成方法，其特征在于，所述将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列的步骤包括：

创建两个HTML标签作为背景图像的载体；

通过CSS工具将排版后的组合背景图像分别载入两个HTML标签中；

将两个HTML标签中的背景图像以图像高度或宽度的二分之一的间隔进行错位排列。

3.根据权利要求1所述的网页背景图像生成方法，其特征在于，在所述根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸的步骤前，还包括：

根据自适应模块输入内容大小确定自适应调整的宽度或高度，并根据该宽度或高度计算背景图像的重复次数。

4.根据权利要求1所述的网页背景图像生成方法，其特征在于，所述根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸的步骤：

利用CSS工具的重复属性分别对两个所述HTML标签中的背景图像在纵向上或横向上进行重复延伸。

5.根据权利要求1所述的网页背景图像生成方法，其特征在于，所述将两个所述HTML标签进行叠加获得网页背景图像的步骤包括：

根据图像请求加载所述两个HTML标签；

通过CSS样式将两个所述HTML标签进行无缝叠加获得网页背景图像。

6.一种网页背景图像生成系统，其特征在于，包括：

排版模块，用于根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；

错位模块，用于将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；

重复模块，用于根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；

叠加模块，用于将两个所述HTML标签进行叠加获得网页背景图像；

其中，所述排版模块进一步用于：

根据自适应内容样式模块将原始背景图像按照井字形划分为9张图片；其中，图像顶部和底部的高度和值为图像高度的二分之一，图像左部和右部的宽度和值为图像宽度的二分之一；

通过CSS工具将9张图片按照十字型方式进行排版并组合在一起；其中，左上、右上、左下、右下部分的图片排列到图像的中心区域。

7.根据权利要求6所述的网页背景图像生成系统，其特征在于，所述错位模块进一步用于：

创建两个HTML标签作为背景图像的载体；

通过CSS工具将排版后的组合背景图像分别载入两个HTML标签中；

将两个HTML标签中的背景图像以图像高度或宽度的二分之一的间隔进行错位排列。

8.根据权利要求6所述的网页背景图像生成系统，其特征在于，在重复模块前，还包括：

计算模块，用于根据自适应模块输入内容大小确定自适应调整的宽度或高度，并根据该宽度或高度计算背景图像的重复次数。

9.根据权利要求6所述的网页背景图像生成系统，其特征在于，所述重复模块进一步用于：

利用CSS工具的重复属性分别对两个所述HTML标签中的背景图像在纵向上或横向上进行重复延伸。

10.根据权利要求6所述的网页背景图像生成系统，其特征在于，所述叠加模块进一步用于：

根据图像请求加载所述两个HTML标签；

通过CSS样式将两个所述HTML标签进行无缝叠加获得网页背景图像。

11.一种存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时可实现如权利要求1至5中任一项所述的网页背景图像生成方法。

12.一种计算机设备，包括存储介质，处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如权利要求1至5中任一项所述的网页背景图像生成方法。