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

  main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
6.  
7.     <mx:Style>
8.         .containerVBox {
9.             backgroundColor: haloBlue;
10.             borderThickness: 1;
11.             borderColor: black;
12.             borderStyle: solid;
13.             paddingLeft: 5;
14.             paddingRight: 5;
15.             paddingTop: 5;
16.             paddingBottom: 5;
17.         }
18.     </mx:Style>
19.  
20.     <mx:Script>
21.         <![CDATA[
22.             [Bindable]
23.             [Embed("Fx.png")]
24.             private var flexLogo:Class;
25.  
26.             private function backImage_change(evt:Event):void {
27.                 if (backImage.selected) {
28.                     vBox.setStyle("backgroundImage", flexLogo);
29.                 } else {
30.                     vBox.setStyle("backgroundImage", null);
31.                 }
32.             }
33.  
34.             private function backColor_change(evt:Event):void {
35.                 if (backColor.selected) {
36.                     vBox.setStyle("backgroundColor", colorPicker.selectedColor);
37.                 } else {
38.                     vBox.setStyle("backgroundColor", null);
39.                 }
40.             }
41.         ]]>
42.     </mx:Script>
43.  
44.     <mx:String id="lorem" source="lorem.txt" />
45.  
46.     <mx:ApplicationControlBar dock="true">
47.         <mx:Form styleName="plain">
48.             <mx:FormItem label="backgroundAlpha:">
49.                 <mx:HSlider id="slider"
50.                         minimum="0.0"
51.                         maximum="1.0"
52.                         value="1.0"
53.                         liveDragging="true"
54.                         tickInterval="0.1" />
55.             </mx:FormItem>
56.             <mx:FormItem label="show backgroundImage:">
57.                 <mx:CheckBox id="backImage"
58.                         selected="true"
59.                         change="backImage_change(event);" />
60.             </mx:FormItem>
61.             <mx:FormItem label="show backgroundColor:">
62.                 <mx:CheckBox id="backColor"
63.                         selected="true"
64.                         change="backColor_change(event);" />
65.             </mx:FormItem>
66.             <mx:FormItem label="backgroundColor:">
67.                 <mx:ColorPicker id="colorPicker"
68.                         selectedColor="white"
69.                         enabled="{backColor.selected}"
70.                         change="backColor_change(event);" />
71.             </mx:FormItem>
72.         </mx:Form>
73.     </mx:ApplicationControlBar>
74.  
75.     <mx:VBox styleName="containerVBox">
76.         <mx:VBox id="vBox"
77.                 backgroundImage="{flexLogo}"
78.                 backgroundAlpha="{slider.value}"
79.                 backgroundColor="white"
80.                 backgroundAttachment="fixed"
81.                 width="500"
82.                 height="250">
83.             <mx:Text width="100%" text="{lorem}" />
84.         </mx:VBox>
85.     </mx:VBox>
86.  
87. </mx:Application>