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 .
opacity: 1; }
How can i do this. Any One would be much appreciated.
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.
Background opacity is achieved using
rgba. For instance, this would create a black background (
rgb(0,0,0)) with 50% (
background-color:rgba(0, 0, 0, 0.5);
To give a background of
rgb(204, 204, 204)) 75% opacity, you'd use:
background-color:rgba(204, 204, 204, 0.75)
The correct way to make only the background opaque would be to apply an
This is the equivalent of
#ccc but semi-transparent because it has an alpha value of
If you change the
opacity value for the entire
div its contents will also go semi-transparent, which is not the intended behaviour.
about the value for opacity:
"Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)"
Here is the link: http://www.w3schools.com/cssref/css3_pr_opacity.asp
AND it wont work like you wrote it:
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);
If you want a (nearly) cross-browser solution, you can try:
/* 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*/
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
Where for IE, the first Hex pair (99) controls the opacity.
This recipe can be found in it's original form on Stack Over Flow.