opacity

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

<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>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

2+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9+ ○

8 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN / Can I Use.

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 */
}