opacity

< css‎ | properties
Jump to: navigation, search

opacity

This article is Ready to Use.


W3C Recommendation

Summary

The opacity property controls transparency and opacity of an element. Its values range from 0 to 1. Assuming defaults at parent level, an element with an opacity of 1 is completely opaque, whereas and element with an opacity of 0 is completely transparent. The opacity used when rendering an element is the product of its opacity and the opacity of its ancestors.

Overview table

Initial value 1
Applies to All elements
Inherited No
Media visual
Computed value [[Computed value::The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0]]]
Animatable Yes
CSS Object Model Property opacity
Percentages N/A

Syntax

  • opacity: alpha-value
  • opacity: inherit


Values

alpha-value
A floating-point value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range.
inherit
Indicates that the property takes the same computed value as the property for the element's parent.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
9.0
Yes
9.0
Yes
1.2
Yes
8.0 filter: alpha(opacity=xx) filter: "alpha(opacity=xx)" (both are synonymous)
4.0 filter: alpha(opacity=xx)

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
1.0
Yes
1.0
Yes
9.0
Yes
9.0
Yes
3.2
Yes
8.0 filter: alpha(opacity=xx) filter: "alpha(opacity=xx)" (both are synonymous)
4.0 filter: alpha(opacity=xx)


Examples

View live example

CSS

.example1 {
  opacity: 0.5;
}

Usage

As an alternative to the visibility property, an element's opacity can be set to 0 to make the element take space but not appear.

It's important to note that opacity affects not only a given element, but all of the elements which it contains.

Notes

The opacity setting is applied uniformly across the entire object. Any values outside the range 0.0 to 1.0 will be clamped to this range.

Object or group opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the object or group is rendered into an RGBA offscreen image, the object or group opacity setting specifies how to blend the offscreen image into the current background.

Note that setting a value smaller than 1 to this property creates a new stacking context. For more information, see What No One Told You About Z-Index by Philip Walton.


Related specifications

Specification Status Related Changes
CSS Color Module Level 3 Recommendation Section 1.2

See also

Related articles

Visual Effects












  • opacity








Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]