Flex RGBA colors in CSS

Question

Hello all, I am trying to style a DataGrid component so that the background is transparent (Flex 4). Rgba colors work fine if I make "alternatingItemColors" an attribute on the component, but if I try to declare it in my css stylesheet, I cannot declare the alpha value.

Works (mxml):

<mx:DataGrid id="songGrid" width="800" height="529" dataProvider="{songs}" itemClick="handleRowClick(event);" x="145" y="168" headerStyleName="dataGridHeader" alternatingItemColors="[0xFFFFFFFF, 0xFFFFFFFF]">

Doesn't Work (css):

mx|DataGrid {
    alternatingItemColors: #FFFFFFFF, #FFFFFFFF;
}

If I enter the values as "0xFFFFFFFF", I get a parse error, because it's not proper css (of course, most of flex's css isn't proper css, but I digress...). So, is there any way to declare the alpha value of these colors in the css?

Answer 1

CSS3 transparency is described at http://www.w3.org/TR/css3-color/#transparency . From the examples, where the alpha is a number between 0 (fully transparent) and 1 (fully opaque):

em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

Answer 2

You could try extending the DataGrid and making the following override:

override protected function drawRowBackground(s:Sprite, rowIndex:int,
                            y:Number, height:Number, color:uint, dataIndex:int):void {
    var background:Shape = Shape(s.getChildAt(rowIndex));
    background.alpha = 0.5; // or whatever alpha value you wish
    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}