网页背景图像生成方法和系统的制作方法
【技术领域】
[0001]本发明涉及计算机技术领域，特别是涉及一种网页背景图像生成方法和系统。
【背景技术】
[0002]在网页背景图像制作中，一般自适应模块功能的实现方法是把设计好的内容样式模块，按照井字的形状切割成9张图片，再通过编写CSS (层叠样式表，一种用来表现HTML或XML等文件样式的计算机语言)代码，把它们组成一个可以自适应宽高的模块，目的是为了将上下左右四个方向中间的内容，能够通过CSS的背景属性来实现内容样式模块的自适应内容宽高，当要加载这个背景图像时，在网页所显示的图片都是需要通过网络连接来请求，单独每一张图片是一个请求，因此要加载这些图片，需要请求的数量一般为9次，这就导致了图片传输速度慢，页面加载速度慢。
[0003]为了减少请求数量，还有方法是按照三字的形状将背景图像分别切割成上中下3张单独图片，这样请求图片的数量一般为3次，虽然减少了请求数量，但内容模块不够灵活缺，无法自适应内容的宽度，扩展性差。
[0004]综上所述，现有的网页背景图像制作方案，一般都是以增加请求图片的数量保证自适应模块功能，以降低自适应模块功能来减少请求图片的数量，难以在保证内容模块自适应功能情况下降低加载图片请求的数量。
【发明内容】
[0005]基于此，有必要针对上述问题，提供一种在保证内容模块自适应功能的同时也能有效降低加载图片请求的数量的网页背景图像生成方法和系统。
[0006]一种网页背景图像生成方法，包括如下步骤:
[0007]根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；
[0008]将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；
[0009]根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；
[0010]将两个所述HTML标签进行叠加获得网页背景图像。
[0011]—种网页背景图像生成系统，包括:
[0012]排版模块，用于根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版；
[0013]错位模块，用于将排版后获得的组合背景图像应用到两个HTML标签中，并将两个HTML标签中的背景图像进行错位排列；
[0014]重复模块，用于根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸；
[0015]叠加模块，用于将两个所述HTML标签进行叠加获得网页背景图像。
[0016]上述网页背景图像生成方法和系统，对背景图像切割后以十字型方式进行排版；通过两个HTML标签作为背景图像载体，将错位排列背景图像进行重复延伸后叠加获得网页背景图像，通过背景图像错位排列和双HTML标签叠加方式，实现了以最少的图像请求数量得到网页的背景图像，同时保留了背景图像自适应模块的灵活性，提高了页面加载速度。
【附图说明】
[0017]图1为本发明实施例网页背景图像生成方法应用系统结构示意图；
[0018]图2为一个实施例的网页背景图像生成方法流程图；
[0019]图3为一个实施例的背景图像示意图；
[0020]图4为十字方式排版的背景图像示意图；
[0021 ]图5为两个HTML标签的不意图；
[0022]图6为两个HTML标签错位排列的7K意图；
[0023]图7为图6所的两个HTML标签置加后得到的背景图像部分7K意图；
[0024]图8为叠加得到的背景图像效果图；
[0025]图9为一个实施例的网页背景图像生成系统结构示意图；
[0026]图10为另一个实施例的网页背景图像生成系统结构示意图；
[0027]图11为能实现本发明实施例的一个计算机系统的模块图。
【具体实施方式】
[0028]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0029]本发明实施例所提供的网页背景图像生成方法可应用于如图1所示的系统中，请参考图1所示，终端设备02可以是诸如个人电脑、智能手机、平板电脑、个人数字助理等设备，但并不局限于此。终端设备02可以通过有线或无线方式等方式接入公共网络，如Internet网等，与服务器04进行通信。终端设备02上可运行浏览器等网页访问工具，用户利用浏览器等可以通过internet网络访问服务器04，并获取所需的背景图像数据；终端设备02的浏览器加载到背景图像数据后，经过相应处理后最终显示为用户所需的网页。
[0030]所述终端设备02可以是指一个设备也可以是指多个设备；服务器04是指实现各种后台功能的服务器设备，可以是指一个设备也可以是指多个设备，在本申请中，更多的是指多个设备。
[0031]参见图2所示，图2为一个实施例的网页背景图像生成方法流程图，包括如下步骤:
[0032]步骤S10，根据自适应模块的样式内容将原始背景图像进行切割，并将切割后得到的各个图片按照十字型方式进行排版。
[0033]在此步骤中，为实现自适应模块功能，首先对背景图像进行图像切割处理，然后以十字型方式进行排版，以确保排版后的图像中需要重复的边缘图片在同一个方向上的180°范围内没有任何遮挡的图像，使得对图像进行重复延伸时不会遇到冲突的图像。
[0034]在一个实施例中，步骤S10的处理过程，具体可以包括如下:
[0035](1)根据自适应内容样式模块将原始背景图像按照井字形划分为9张图片；其中，图像顶部和底部的高度和值为图像高度的二分之一，图像左部和右部的宽度和值为图像宽度的二分之一。
[0036]参考图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 (右侧边缘)，1 = left(左侧边缘)，中心图像属于纯色的部分，这里划分有个要求，就是La+Lc =Lb，Ha+Hc = Hb。
[0037](2)通过CSS工具将9张图片按照十字型方式进行排版并组合在一起；其中，左上、右上、左下、右下部分的图片排列到图像的中心区域。
[0038]参考图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-1mage:repeat_x ;或 background-1mage:repeat-y进行纵向或横向上的重复；重复过程中就不会遇到冲突的图像；而原来四个角的图片mdl_b_l, mdl_t_r, mdl_b_r切割后放到中间属于纯色的部分,不影响这部分图像的元素，同时四个角的图像可以在图像重复后用于后续调用，在自适应调整中恢复出四个角的图像。
[0039]步骤S20，将排版后获得的组合背景图像应用到两个HTML (HyperText Markuplanguage，超级文本标记语言)标签中，并将两个HTML标签中的背景图像进行错位排列。
[0040]在此步骤中，利用两个HTML标签作为背景图像的载体并进行错位排列，作为一个实施例，步骤S20可以具体包括如下:
[0041]首先创建两个HTML标签作为背景图像的载体；参考图5所示，两个标签分别为标签1、标签2，可以将背景图像的模块应用到标签1、标签2中，例如，将mdl_t_c部分的图片分别应用到标签1、标签2中，可以实现顶部边缘的错位排列。
[0042]然后通过CSS工具将排版后的组合背景图