您的位置:首页 > Web前端 > CSS

Flex中如何通过backgroundImage, backgroundColor和backgroundAlpha样式,设置VBox的背景图片和背景颜色以及改变透明度

2009-06-08 23:54 1201 查看
main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Style>

.containerVBox {

backgroundColor: haloBlue;

borderThickness: 1;

borderColor: black;

borderStyle: solid;

paddingLeft: 5;

paddingRight: 5;

paddingTop: 5;

paddingBottom: 5;

}

</mx:Style>



<mx:Script>

<![CDATA[

[Bindable]

[Embed("Fx.png")]

private var flexLogo:Class;



private function backImage_change(evt:Event):void {

if (backImage.selected) {

vBox.setStyle("backgroundImage", flexLogo);

} else {

vBox.setStyle("backgroundImage", null);

}

}



private function backColor_change(evt:Event):void {

if (backColor.selected) {

vBox.setStyle("backgroundColor", colorPicker.selectedColor);

} else {

vBox.setStyle("backgroundColor", null);

}

}

]]>

</mx:Script>



<mx:String id="lorem" source="lorem.txt" />



<mx:ApplicationControlBar dock="true">

<mx:Form styleName="plain">

<mx:FormItem label="backgroundAlpha:">

<mx:HSlider id="slider"

minimum="0.0"

maximum="1.0"

value="1.0"

liveDragging="true"

tickInterval="0.1" />

</mx:FormItem>

<mx:FormItem label="show backgroundImage:">

<mx:CheckBox id="backImage"

selected="true"

change="backImage_change(event);" />

</mx:FormItem>

<mx:FormItem label="show backgroundColor:">

<mx:CheckBox id="backColor"

selected="true"

change="backColor_change(event);" />

</mx:FormItem>

<mx:FormItem label="backgroundColor:">

<mx:ColorPicker id="colorPicker"

selectedColor="white"

enabled="{backColor.selected}"

change="backColor_change(event);" />

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>



<mx:VBox styleName="containerVBox">

<mx:VBox id="vBox"

backgroundImage="{flexLogo}"

backgroundAlpha="{slider.value}"

backgroundColor="white"

backgroundAttachment="fixed"

width="500"

height="250">

<mx:Text width="100%" text="{lorem}" />

</mx:VBox>

</mx:VBox>



</mx:Application>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐