12.8 Adjusting Element Transparency

NN 6, IE 4 (Win)

12.8.1 Problem

You want an element to be partially transparent so that background content bleeds through.

12.8.2 Solution

CSS Level 2 offers no provisions for specifying opacity of elements (opacity is the inverse of transparency), but Internet Explorer for Windows and Netscape 6 or later have different proprietary approaches to specifying opacity on any element in CSS-like syntax. In fact, IE has two different systems, one of which works only in IE 5.5 for Windows or later.

The IE style sheet syntax that works with versions as early as IE 4 (for Windows only) relies upon a proprietary filter property. The following example makes an element whose ID is watermark appear with 25% opacity:

#watermark {filter:alpha(opacity=25)}

The newer syntax utilizes an ActiveX control that is delivered with IE 5.5 or later for Windows and requires a more explicit reference:

#watermark {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25)}

For Netscape 6 or later, use the Mozilla proprietary opacity style control, -moz-opacity:

#watermark {-moz-opacity:25%}

The leading hyphen of the property name is intentional so that it won't be confused or conflict with any future opacity property that may be adopted by the W3C.

12.8.3 Discussion

Internet Explorer filter styles are an extensive set of transforms intended primarily for text. All filters are specified as CSS-like style rules whose property is filter. For the backward-compatible version, the property value consists of one of the filter's names followed by a pair of parentheses. Some filters, such as the alpha filter that controls opacity, have one or more additional properties that are set via equality symbol assignments inside the parentheses. Multiple property/value pairs are comma-delimited.

Possible properties for the alpha filter include not only a straight opacity level (specified within a range of 0 to 100, with 100 being completely opaque), but also additional opacity styles, such as an opacity gradient where the opacity varies across the area of the element. Possible gradient styles are uniform (value of 0, the default), linear (value of 1), radial (value of 2), or rectangular (value of 3). You can then use the opacity property to specify the opacity level for the start of the gradient and finishopacity for the end of the gradient:

{filter:alpha(opacity=25, finishopacity=75, style=2)}

Additional properties let you define the x,y coordinates for both the start and end points of the gradient (the startX, startY, finishX, and finishY properties).

To modify a filter's setting under script control, reference the filter just like any style property and assign its value as a string containing the entire filter name, parentheses, and extra properties:

document.getElementById("myBox").style.filter = "alpha(opacity=80)";

If you are using the newer ActiveX control for filtering in IE 5.5 and later, all references must include the control's internal object path, as shown in the Solution. Even script references must include this information, but access is through the filters collection of the element object (not the style object):

document.getElementById("myBox").
   filters["DXImageTransform.Microsoft.Alpha"].Opacity=80;

Be aware, however, that to modify a value of this newer version, the named filter must be declared in a CSS style sheet or in the element's style attribute. You cannot introduce a DXImageTransform opacity filter to an element that does not have one defined for it via CSS syntax.

Scripting the Mozilla opacity filter is accomplished through the style.MozOpacity property. A value for this property must be a string representing a number between 0 (transparent) and 1 (opaque) or between 0% and 100% (with the percent symbol). Note that the property has a leading uppercase letter. The Mozilla opacity filter is a uniform type without any gradients.

12.8.4 See Also

Recipe 12.7 for hiding elements entirely.