本发明涉及计算机信息技术领域，具体地说是一种实用性强、网页UI界面与网页设计图的对比方法。
背景技术：
随着计算机网络技术的不断发展，BS架构的系统被广泛应用于各行各业，网页应用程序也越来越复杂，开发团队分工也越来越细致。现今，大多数网站制作团队中，界面UI设计与实现是由不同的人员协作完成，由于界面设计与界面实现的是分别会有不同的侧重点，因此会出现实现效果与设计图不一致的情况，基于此，现提供一种网页UI界面与网页设计图的对比方法，方便对界面实现的审核，以提高审核效率。
技术实现要素：
本发明的技术任务是针对以上不足之处，提供一种实用性强、网页UI界面与网页设计图的对比方法。
一种网页UI界面与网页设计图的对比方法，其实现过程为：通过浏览器自带扩展应用，在现有网页内容上添加一个与网页大小相同的图层，并将网页设计图按照网页实际大小加载至此图层，加载完成后，通过控制图片透明度，即可将设计图与网页实现效果进行对比，从而实现对网页实现效果进行检查的目的。
添加图层的过程为：在浏览器中编写扩展程序，在网页加载完成后，读取网页的宽度及高度，根据读取的页面尺寸，生成一个独立的网页节点，再将效果图插入到此节点中作为节点背景图，最后将此节点插入到网页的body节点中，通过调整图片的透明度即可完成对比。
上述图层添加的具体过程为：
步骤一：网页加载完成后，读取网页宽度W和高度H；
步骤二：创建页面Dom节点N，并将宽度高度属性分别设置为W和H；
步骤三：将节点N的定位属性设置为绝对定位，层级设置为最高；
步骤四：用户选择并加载设计图P；
步骤五：将节点N的背景图设置为图片P；
步骤六：将节点N插入到网页body节点中；
步骤七：用户输入透明度的百分比数值a；
步骤八：读取用户输入的数值a；
步骤九：将节点P的透明度属性设置为输入的数值a；
步骤十：对比观察网页UI界面与设计图间是否存在差异，及位置偏移。
所述网页设计图通过浏览器加载至网页应用中，并覆盖至整个网页应用的最顶层，之后再通过HTML技术，调整设计图的透明度。
本发明的一种网页UI界面与网页设计图的对比方法，具有以下优点：
该发明的一种网页UI界面与网页设计图的对比方法，可以按照1:1的尺寸，直观的看到网页应用的界面与设计图之间是否完全匹配；使用Chrome浏览器自带扩展功能，无需对网页本身内容进行修改即可完成与设计图的精确对比；对于与设计图不匹配的应用，可以在不改变网页应用的前提下，精确对比出实现效果与设计图之间的偏移量；实用性强，适用范围广泛，易于推广。
附图说明
图1为本发明的实现流程图。
具体实施方式
下面结合附图及具体实施例对本发明作进一步说明。
如附图1所示，本发明提供一种网页UI界面与网页设计图的对比方法，为解决网页界面UI实现效果的与设计图之间的审核问题，其实现过程为：通过Chrome等浏览器自带扩展应用，在现有网页内容上添加一个与网页大小相同的图层，并将网页设计图按照网页实际大小加载至此图层，即覆盖至整个网页应用的最顶层，加载完成后，再通过HTML技术，通控制图片过透明度，即可将设计图与网页实现效果进行对比，从而实现对网页实现效果进行检查的目的。
添加图层的过程为：在Chrome浏览器中编写扩展程序，在网页加载完成后，读取网页的宽度及高度，根据读取的页面尺寸，生成一个独立的网页节点，再将效果图插入到此节点中作为节点背景图，最后将此节点插入到网页的body节点中，通过调整图片的透明度即可完成对比。
上述图层添加的具体过程为：
步骤一：网页加载完成后，读取网页宽度W和高度H；
步骤二：创建页面Dom节点N，并将宽度高度属性分别设置为W和H；
步骤三：将节点N的定位属性设置为绝对定位，层级设置为最高；
步骤四：用户选择并加载设计图P；
步骤五：将节点N的背景图设置为图片P；
步骤六：将节点N插入到网页body节点中；
步骤七：用户输入透明度的百分比数值a；
步骤八：读取用户输入的数值a；
步骤九：将节点P的透明度属性设置为输入的数值a；
步骤十：对比观察网页UI界面与设计图间是否存在差异，及位置偏移。
上述具体实施方式仅是本发明的具体个案，本发明的专利保护范围包括但不限于上述具体实施方式，任何符合本发明的一种网页UI界面与网页设计图的对比方法的权利要求书的且任何所属技术领域的普通技术人员对其所做的适当变化或替换，皆应落入本发明的专利保护范围。