CSS Reference Manual

CSS @rules

Complete List of CSS Attributes

CSS3 order attribute CSS min-width attribute

CSS3 Usage and examples of opacity attribute

The opacity CSS attribute specifies the opacity of an element.

The following table provides usage instructions and version history of this attribute, as well as the syntax of using this attribute in JavaScript scripts.

Default value:	1 (Opaque)
Applies to:	All elements
Inheritance:	No
Animatable:	Yes.Please refer to Animation properties.
Version:	CSS3New feature
JavaScript syntax:	object.style.opacity=0.5

Syntax of opacity usage

The syntax of this attribute is as follows:

opacity:　alphavalue　|　initial　|　inherit

The following example demonstrates how to use the opacity attribute.

Example

　　img　{
　　　opacity:　0.25;
　　}
　　p　{
　　　opacity:　0.5;
　　}

Test and see‹/›

Attribute value

The following table describes the values of this attribute.

Value	Description
alphavalue	0 (completely transparent) to1The range of numbers within (completely opaque) will be limited within this range. Any smaller or larger value will be limited within this range.
initial	Set this attribute to its default value.
inherit	If specified, the associated element uses the opacity attribute value of its parent element.

Browser compatibility

The compatibility of the opacity attribute of the browser is shown in the following table; the numbers in the table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 1.7+ Google Chrome1+ Internet Explorer 9+ Apple Safari 2+ Opera 9+

Note: Internet Explorer 8and earlier versions do not support opacity, but instead support alternative methods, only Microsoft filterProperty. Like: filter: Alpha(opacity=50); Learn aboutCSS opacityMore information

Please refer to the tutorials related to the following content:CSS opacity,CSS color values.