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

Question

This is FF plugin

http://www.pixelperfectplugin.com/

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N

How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.

Answer 1

I found the way here

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

Answer 2

Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.

Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.