Opacity
CSS3 opacity sets the opaqueness of the element. Opacity is the opposite of transparency. The value of opacity is a floating value, between 0 to 1.
0 defines the element as fully transparent( same like visibility:hidden), whereas an opacity value 1 means the element is fully opaque or zero transparency.
Change Opacity
Opacity Values
Possible values of opacity
| Opacity | values |
|---|---|
| 1 | Default opacity of all elements. |
| 0 | Opacity 0 shows element as fully transparent. Same like (visibility:hidden) |
| 0.5 | Opacity 0.5 shows element as half transparent. Thus we can see background colors and images. |
How to use opacity
Opacity values are always floating values, minimum value is 0, and maximum value is 1. We prefer opacity value till one place.
<style>
.img-1{opacity:1}
.img-2{opacity:0.8}
.img-3{opacity:0.5}
.img-4{opacity:0}
</style>
<div>
<img class="img-1" src="images/logo.png" alt="">
<img class="img-2" src="images/logo.png" alt="">
<img class="img-3" src="images/logo.png" alt="">
<img class="img-4" src="images/logo.png" alt="">
</div>
Opacity:1
Opacity:0.8
Opacity:0.5
Opacity:0
Opacity in IE8 and below
Internet Explorer 8 and below doesn't support opacity. But using css filter property, opacity can works even on old IE versions like IE 8, 7 , 6 and 5.
Opacity in Internet Explorer IE8 and below
<style>
.box{
opacity:0.5; /*latest Browsers*/
filter: alpha(opacity=50) /*IE 5-7*/
-ms-filter: alpha(opacity=50) /*IE 8*/
}
</style>
Note: opacity is supported in html5 based browsers only. IE 8 and below doesn't support opacity. For old IE versions, use filter:alpha(opacity=n), where n is a number between 0-100.