{"id":14083,"date":"2011-09-05T20:56:01","date_gmt":"2011-09-06T03:56:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14083"},"modified":"2016-02-23T14:23:13","modified_gmt":"2016-02-23T21:23:13","slug":"opacity","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/opacity\/","title":{"rendered":"opacity"},"content":{"rendered":"

The opacity<\/code> property in CSS<\/abbr> specifies how transparent<\/em> an element is. <\/p>\n

Basic use:<\/p>\n

div {\r\n  opacity: 0.5;\r\n}<\/code><\/pre>\n
Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery<\/a>. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
IE Compatibility<\/h3>\n
If you want opacity to work in all versions of IE<\/a>, the order should be as follows:<\/p>\n
.opaque {\r\n  \/* Theoretically for IE 8 & 9 (more valid) *\/\r\n  \/* ...but not required as filter works too *\/\r\n  \/* should come BEFORE filter *\/\r\n  -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\"; \/\/ IE8\r\n\r\n  \/* This works in IE 8 & 9 too *\/\r\n  \/* ... but also 5, 6, 7 *\/\r\n  filter: alpha(opacity=50); \/\/ IE 5-7\r\n  \r\n  \/* Modern Browsers *\/\r\n  opacity: 0.5;\r\n}<\/code><\/pre>\n
If you don\u2019t use this order, IE8-as-IE7 doesn\u2019t apply the opacity, although IE8 and a pure IE7 do.<\/em><\/p>\n
Note on Stacking Contexts<\/h3>\n
If an element with opacity<\/code> and a value less than 1 is positioned, the z-index<\/code><\/a> property applies as described in CSS2.1, except that the auto<\/code> value is treated as 0 since a new stacking context is always created.<\/p>\n
Opacity can be used as an alternative to the visibility<\/code><\/a> property: visibility: hidden;<\/code> is just like opacity: 0;<\/code>.<\/p>\n
Related Properties<\/h3>\n