如何在CSS中制作不透明背景？

Question

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;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999999999;
opacity: 1; } 

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

Answer 1

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)
}

Answer 2

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

background:rgba(204,204,204,0.5);

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.

Answer 3

try something like this:

.Background
{
background-color:white;
background: rgba(0, 0, 0, 0.5);
}

Answer 4

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.

Answer 5

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:

background-color:#ccc transparent;

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

background-color:#ccc;

Answer 6

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 .