Question

当弹出窗口加载整个背景时，我为facebook创建了弹出窗口，就像颜色代码#ccc;我也可以查看内部内容。在css中如何做到这一点是我尝试过的代码。

#ptechsolfb {display:none;
background-color:#ccc transparent;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999999999;
opacity: 1; }

我该怎么办？任何人都会非常感激。

Answer 1

使用rgba实现背景不透明度。例如，这会产生50％（#000）不透明度的黑色背景（rgb(0,0,0)或0.5）：

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

JSFiddle example

要提供#CCC（rgb(204, 204, 204)）75％不透明度的背景，请使用：

element {
    background-color:rgba(204, 204, 204, 0.75)
}

Answer 2

仅使背景不透明的正确方法是应用rgba颜色：

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

这相当于#ccc但是半透明，因为它的alpha值为0.5。

如果更改整个opacity的{{1}}值，其内容也将变为半透明，这不是预期的行为。

Answer 3

尝试这样的事情：

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

Answer 4

对于背景透明度，您需要rgba颜色定义。这看起来像这样：

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

前三个数字是红色，绿色和蓝色组件，第四个数字是“alpha通道”的不透明度百分比。

但请注意，IE8或更早版本不支持此语法。它几乎适用于所有其他当前浏览器，但IE8支持对您来说可能是一个问题。

如果你需要支持IE8，我的建议是使用CSS3Pie，这是一个polyfill脚本，它为旧的IE版本添加了对此功能（以及其他东西的加载）的支持。

希望有所帮助。

Answer 5

关于不透明度的值：

“指定不透明度。从0.0（完全透明）到1.0（完全不透明）”

以下是链接：http://www.w3schools.com/cssref/css3_pr_opacity.asp

它不像你写的那样工作：

background-color:#ccc transparent;

您必须从background-color属性中删除透明属性：

background-color:#ccc;

Answer 6

如果您需要（几乎）跨浏览器解决方案，可以尝试：

.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)";
}

对于IE，第一个Hex对（99）控制不透明度。

来源here。

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

6 个答案: