Opacity in web pages?

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.