Aligning a transparent PNG over same-colored CSS background

Answer 1

I can't immediately solve the issue you're experiencing, but I can offer an alternative text-fading solution, if that's of any use?

.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */
               }

the value of 0.0 at the end is the alpha value, and can range from 0 to 1, with 0 being opaque and 1 being transparent. rgba has problems on browsers other than Firefox insofar as I've experimented.

perhaps

.text-to-fade {opacity: 0.5; /* for most browsers */
               filter: alpha(opacity=50); /* for IE */
               }

Answer 2

The reason it appears to be a different color is because it's transparent, not because the colors are actually different. To demonstrate this, open an image editor that supports layers. Create a white bottom layer and a black top layer. Set the opacity of the black layer to 50% and merge the layers down. Use a color picker to check the color. It's going to be #808080, not black.

The reason it's not fading is because that color is additive. Say your text is #808080 too: in places where there's text, you have #808080 overlaying #808080--and that ends up being something like #424242 rather than canceling out as you want. There's really not a great way to do what you're trying to do inside a web browser in only one step.

One thing to do would be to make the text invisible (visibility: hidden;) with javascript. Another option would be to use relative or absolute positioning and set up the z-indices so things look something like this:

• 3: TRANSPARENT-GREY
• 2: button/any other objects
• 1: OPAQUE-GREY
• 0: text

That will block out the text and leave anything else partially visible.