Flex RGBA colors in CSS
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 i开发者_开发百科sn't proper css, but I digress...). So, is there any way to declare the alpha value of these colors in the css?
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);
}
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 */
精彩评论