1

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

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

我怎样才能做到这一点。任何人将不胜感激。

4

6 回答 6

3

背景不透明度是使用rgba. 例如，这将创建一个具有 50% ( ) 不透明度的黑色背景 (#000或)：rgb(0,0,0)0.5

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

JSFiddle 示例。

要给出#CCC( rgb(204, 204, 204)) 75% 不透明度的背景，您可以使用：

element {
    background-color:rgba(204, 204, 204, 0.75)
}
于 2013-05-30T09:31:47.887 回答
3

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

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

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

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

于 2013-05-30T09:32:58.750 回答
2

尝试这样的事情：

.Background
{
background-color:white;
background: rgba(0, 0, 0, 0.5);
}
于 2013-05-30T09:34:40.737 回答
2

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

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

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

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

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

希望有帮助。

于 2013-05-30T09:54:47.127 回答
1

关于不透明度的值：

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

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

它不会像你写的那样工作： 

background-color:#ccc transparent;

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

background-color:#ccc;
于 2013-05-30T09:33:00.430 回答
1

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

.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，第一个十六进制对 (99) 控制不透明度。

来源在这里。

于 2013-05-30T09:49:57.267 回答