Grayscale Magic! Is it implemented?

[MicroByte]

Just wanted to see if this was fully implemented because I cannot get it to work.  I created a black and white image and set the following in the index.gui file:

  <image class="steps" href="steps_icon_invert.png" height="50" width="50" x="112" y="18" />

I then set this in the styles.css file:

   #steps { fill: #ff0000; opacity: 1; }

When run, nothing happens.  the Icons just show up as black and white png images and nothing more.  Is there something else that needs to be set for this to work?

[Liljeberg · Accepted solution]

It works, but you will have to try different ways of saving the png. I'm using Photoshop and only the standard Save as produced a png that could use "Grayscale magic". The other two options (two versions of save for web) doesn't work. Also make sure the file actually IS grayscale, not RGB with only gray colors. 

[JonFitbit]

It does work, but the image needs to be 8-bit.

$ file 0.png
0.png: PNG image data, 69 x 109, 8-bit gray+alpha, non-interlaced