CSS mask image issue

Question

I'm trying to mask some text with a striped image. When i inspect the element i can see the mask image but it will not work. Link below.

http://piersrueb.com/colors/

I got the code from the Trent Walton site, the strange this is that if i copy the image path from Trent's site and place it in my css it works.

http://trentwalton.com/2011/05/19/mask-image-text/

If you can tell me where i am going wrong I'd appreciate it.

Answer 1

Mask images have to be monochrome. Colours inside of them will have no effect.

Answer 2

It is something to do with your PNG. I'm not really sure why, but I quickly swapped out your http://piersrueb.com/colors/img/stripes.png for Trent's http://trentwalton.com/wp-content/uploads/2011/05/mask.png using Chrome's web inspector and it started working.

I couldn't tell you why this is happening, perhaps some weird image meta? But I hope that helps you figure it out. :)