如何在不使用Firefox像素完美插件的情况下将设计模型作为叠加层来加快开发速度？

Question

这是FF插件

http://www.pixelperfectplugin.com/

Pixel Perfect是一个Firefox / Firebug扩展，允许Web开发人员和设计人员轻松地将Web组合覆盖在开发的HTML之上。

了解详情：http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N

如何像这个插件一样获取所有div后面的模型图像。这个工具只在firefox上显示布局背后的设计，我想在所有浏览器上看到。

Answer 1

我在这里找到了方法

http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/

Answer 2

如果你想要它，那么只需将其设置为body或html的背景图像即可。如果他们需要使用bgimages或颜色作为设计的一部分进行样式设置，那么我想你可以在dom中使用绝对位置抛出另一个div，并将z-index设置为0或-1。如果你想要它覆盖dom那么你只能使用一个疯狂的高z-index然后设置不透明度来做同样的事情。这会干扰我认为的布局上的直接点击检查，但你仍然可以从html窗格到达元素。

毫无疑问，没有任何方法可以在纯js中进行开发，这将为您提供浏览器插件的功能。