Background-alpha

From Frontal Wiki

Purpose

This style sets the opacity of the background of a visual element.

Value

A number from 0 (completely transparent) to 1 (completely opaque). The default value is 1.

background-alpha: .5;

Remarks

An element must have a background for this style to work so at least the element must have a background-color style. Then it must also have some non-zero dimensions. This is most easily done by giving the element width and height styles though the example below shows how the intrinsic dimensions of a 'text' tag can also achieve this.

Example

Notice in the example how the text remains completely opaque while its background is somewhat transparent.

<style><![CDATA[
	img, text
		{
			margin: auto;
		}
	text
		{
			top: 0px;
			padding: 50px;
			color: white;
			font-size: 24px;
			font-family: Swift LT Std;
			background-color: black;
			background-alpha: 0.6;
		}
]]></style>
<include rel="assets" blocking="true" src="assets.swf" fontClasses="SwiftLTStd" />
<img src="http://www.frontalcode.com/assets/images/image_6.jpg" />
<text><![CDATA[Hello, world.]]></text>

Can Be Applied To

This style can be applied to any visual element:

• div
• document
• img
• text
• video
• form
• input