gradient transparency for element content

Question

I'm trying to add gradient transparency to element's content by adding following style to it in my Metro HTML5 app:

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0,FinishX=100, StartY=0, FinishY=100);

It has no effect. it seems to work in IE10 (both desktop and metro).

Am I doing something wrong? What is the proper way to apply gradient transprency to element content?

Answer 1

Rather than using the DirectX image filters you can use CSS gradients such as http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html you'll need to use an rgba color value for opacity though. This works for the background of an element I'm not sure there is a way to apply it for the content, though you could position a div with a gradient on top of your element.

Answer 2

Andy,

Thank you for the suggestion. I'm aware of CSS gradient backgrounds. However in this particular case I want the content itself to "fade" into background elements so it will not do the trick.

Overlaying the element with another div will not help either since it will be impossible to replicate background content in that foreground element.

filter:alpha is precisely what I need, but unfortunately I can't get it to work.

Answer 3

Sorry, not sure what else you can do, as far as I'm aware the DirectX image filters aren't supported in Metro style HTML5 apps. 

Answer 4

Ok. I wasn't sure if that was the case, I was doing something wrong or there was a bug. Would be nice to get them eventually, since when writing Metro apps there's no need to worry about cross-browser compat so we can use MSFT-specific stuff all the way.

Since they seem to work in IE10/Immersive browser, it shouldn't be impossible to port them into wwahost runtime.

In fact I was under the impression that wwahost and ie10 are identical in terms of features. Is there some document that outlines the differences?