简单实现页面临摹设计图功能

腾讯出品了一个alloydesigner插件，即可以把设计稿拖进你的Web页面铺在页面的最底层，然后就可以对着设计稿来构建DOM元素和CSS样式。我个人试用了一下，还是不够理想。（觉得有点麻烦，主要是要引入js脚本）

于是，本人就想到一个简单方法，仿alloydesigner插件的临摹功能。

css代码

html:before {
  content:"";
  position:fixed;
  background:url(layout.jpg) no-repeat 50% 0;/*设置设计图*/
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:.3;/*设置透明度*/
}

如图：

简单实现页面临摹设计图功能

PS：国外也有类似的chrome插件Chrome插件PerfectPixel by WellDoneCode。

简单实现页面临摹设计图功能

相关推荐