Tutorial :Opacity in web pages?


I keep seeing 60-80% opacity on tables on websites. They look really cool, but I'm not sure why they are doing it. Is it Javascript, or is it an image? How do I change the opacity of a table?


You can do it in CSS, but it requires a little hacking to get it to work cross-browser.

selector {      filter: alpha(opacity=50); /* internet explorer */      opacity: 0.5;           /* fx, safari, opera, chrome */      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/  }  


IE uses the syntax filter:alpha(opacity=80), where a lower value makes the element more transparent, while Mozilla uses -moz-opacity:0.8 where a lower value has the same effect on transparency. The same things goes for the CSS3 valid syntax opacity:0.8;

So these are the three CSS properties that you need.

filter:alpha(opacity=80); //IE

opacity: 0.8; //CSS3

-moz-opacity:0.8; //Mozilla


Opacity can be specified in CSS, but it's not supported by all browsers (specifically older IE)


You can also create a 1x1 pixel 32 bit PNG image which is for example a black square with the opacity you require. Then in your css you can do...

element  {      background: url(/Images/Transparent.png) repeat;  }  

This way you can avoid all the different hacks. You may have problems with Alpha transparency in IE6 but there are ways around this also


It can be done both ways, I prefer an alpha transparent png file as a background. Doing an alpha on the table makes the actual contents semi-transparent as well. See the other answers for the css values.


If you want a broad 'cross browser' solution, except for IE6 (totally deprecated), this will always work:

div {      background-image: url('opacity.png');  }  

With "opacity.png" being a 1px x 1px transparent PNG24

It does generate one extra request to your server, but in most cases, it's totally affordable.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »