<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/05/changing-a-vbox-containers-background-alpha-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<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>