How can i make the opacity background in css?


I created the popup for the facebook when the popup load the entire background is goes to something like color code #ccc; which can i view the inside content also. How can do this in css here is the code that i tried .

#ptechsolfb {display:none;
background-color:#ccc transparent;
opacity: 1; } 

How can i do this. Any One would be much appreciated.

Problem courtesy of: Vignesh Pichamani


For background transparency, you need an rgba color definition. This would look like this:

background-color:rgba(200, 200, 200, 0.5);

Where the first three numbers are the red, green and blue components, and the fourth number is an opacity percentage for the 'alpha channel'.

However, please note that this syntax isn't supported in IE8 or earlier. It does work in pretty much all other current browsers, but IE8 support may be a problem for you.

If you need to support IE8, my suggestion is to use CSS3Pie, which is a polyfill script that adds support for this feature (and a load of other stuff) to old IE versions.

Hope that helps.

Solution courtesy of: Spudley


Background opacity is achieved using rgba. For instance, this would create a black background (#000 or rgb(0,0,0)) with 50% (0.5) opacity:

element {
    background-color:rgba(0, 0, 0, 0.5);

JSFiddle example.

To give a background of #CCC (rgb(204, 204, 204)) 75% opacity, you'd use:

element {
    background-color:rgba(204, 204, 204, 0.75)
Discussion courtesy of: James Donnelly

The correct way to make only the background opaque would be to apply an rgba color:


This is the equivalent of #ccc but semi-transparent because it has an alpha value of 0.5.

If you change the opacity value for the entire div its contents will also go semi-transparent, which is not the intended behaviour.

Discussion courtesy of: Niels Keurentjes

about the value for opacity:

"Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)"

Here is the link:

AND it wont work like you wrote it:

background-color:#ccc transparent;

You have to remove the transparent atribute from background-color property:

Discussion courtesy of: Gimmy

try something like this:

background: rgba(0, 0, 0, 0.5);
Discussion courtesy of: 7alhashmi

If you want a (nearly) cross-browser solution, you can try:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Where for IE, the first Hex pair (99) controls the opacity.

Source here.

Discussion courtesy of: albertedevigo

This recipe can be found in it's original form on Stack Over Flow.