web页面设计稿的完美还原

 

       以前Firefox有个插件，可以把设计稿载入进去，设置成半透明，然后这样布局有所参照，可以尽可能完美的还原页面，甚至精确到像素。但 是随着FF的不断升级，那个插件很久没有更新，已经不能用了。 当然我们也有其他方法实现，此神功威力强大，但是内力消耗也甚大，慎用，慎用。 

 

对眼神功上篇

html:after,
body {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 5000px;
}
                
html:after {
    content:"";
    opacity: 0.15;
    z-index: 1;
    background: url(page.png) no-repeat center top;   
}
                
body { z-index: 2; }

 

说明：布局时可将以上css加入，完成后删除即可。使用：after伪类设置背景图，讲设计稿半透明化固定在最底层，不影响html和body。

 

 

 

对眼神功下篇

 

此下篇配合上篇，可以完美发挥对眼神功威力，可以以最快的速度，精准还原设计稿，甚至于精确到像素，如果你愿意的话，当然时间和精力毕竟消耗还是有点大的。

 

 

 

说明：webstrom是个很好的前端开发工具，下篇主要借用其css-x-fire插件，此插件允许在firebug中动态调整css，调整完成后，一键改写css文件，方便快捷。

 

 

 

有强迫症，总想精确到像素还原的童鞋可以试试完整篇的对眼神功。

 

转载于:https://www.cnblogs.com/k13web/p/4139857.html