Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

opacity

Specifies the opacity of an element.

Sample Code

style.css

div.test { opacity: 1;}
div.test1 { opacity: 0.5;}
div.test2 { opacity: 0;}

Available Values

Value	Description
number	A numeric value that specifies the opacity. No unit is used. The valid range is from '0.0' to '1.0'. Values closer to '0.0' result in higher transparency. The initial value is '1.0'.

Browser Display Result

<p style="opacity: 1;"><img src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="opacity: 0.5;"><img src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="opacity: 0;"><img src="/dics/dictionary-css/img/sample.jpg"></p>

Details

Specifies the opacity of an element.

An element made fully transparent by the 'opacity' property simply becomes invisible — it does not disappear from the layout. If you want the element to be removed from the layout entirely, use the 'display' property with a value of 'none'.

Note that the 'opacity' property does not work in IE8 and below. If you need to support transparency in IE8 and below, also specify 'alpha(opacity=number)' with the 'filter' property. The number for 'filter: alpha(opacity=number)' ranges from '0' to '100', where '0' is fully transparent and '100' is fully opaque.

div.test {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Fallback for IE8 and below */
    -ms-filter: alpha(opacity=50); /* Fallback for IE8 and below */
}