首页 文章资讯 PerfectPixel 插件,网页中加载设计图,精准校验网页像素

PerfectPixel 插件,网页中加载设计图,精准校验网页像素

发布者 : may

869

2020-02-10

使用PerfectPixel插件 ,可以将设计图加载至网页中,与已成型的网页进行重叠对比,以帮助开发和设计人员规范网页像素精度。是一款可以优化前端页面显示的chrome插件


PerfectPixel by WellDoneCode (pixel perfect)

PerfectPixel by WellDoneCode (pixel perfect)

This extension helps develop your websites with pixel perfect accuracy!

下载


插件背景


在网页的开发流程中,多数是由产品原型图到设计图,再到技术人员的开发。设计稿的这个环节可以认为是网页的图片版,通过开发人员编写成完整的网站,但最后呈现出来的效果往往和设计图有一定偏差,那怎么确定这个微小的差值呢?这种情况可以借助PerfectPixel这款chrome插件


插件功能


PerfectPixel插件会将设计图上传至网页中,并在HTML顶部放置一个半透明的图像叠加层,让当前页面可以和设计稿进行精确对比,帮助前端人员精度开发网站。PerfectPixel插件对图片的大小没有限制,并且支持上传任意数量的图片。


插件使用


首先,通过当前页面下载PerfectPixel离线安装包,打开扩展程序内的开发者模式,将解压后的crx文件拖拽至扩展程序管理,选择添加扩展,即可安装成功。


浏览器插件栏中打开PerfectPixel,通过上传或者拖拽图片的方式上传需要对比的图片,如图所示。




通过ORIGIN可以更改图片的位置,以调整网页的像素差值;通过OPACITY可以调整图片的透明度。




你可以同时添加多张图片,并支持对图片进行反转色处理。




当你需要还原页面时,单击插件栏中的PerfectPixel图标,所有覆盖效果都会被隐藏。


PerfectPixel by WellDoneCode (pixel perfect)

PerfectPixel by WellDoneCode (pixel perfect)

This extension helps develop your websites with pixel perfect accuracy!

下载

分享

全部评论

    展开更多评论

    扩展迷QQ交流群

    错误提示保存失败
    成功提示保存成功
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“插件”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功
    下载遇到问题?请添加QQ群:398095333
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“脚本”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功