Question

在提出这个问题之前，我看到了一个问题：CSS background opacity with rgba not working in IE 8但是对我没有用。我只用css做一个弹出窗口。它适用于ie9 +和mozilla25 +我用来做的css： HTML：

<div id="backgroundFilter">
    <div id="overBackgroundFilter"></div>
</div>

#backgroundFilter 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(184, 184, 184, 0.5);
}

#overBackgroundFilter 
{
position: static;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 385px;
width: 400px;
background-color: #F8F8F8;
border-width: 6px;
border-color: #E0E0E0;
border-style: solid;
}

我为ie8更改了我的css，它适用于ie8，但它不适用于mozilla.In mozilla opacity从backgroundFilter传递到overBackgroundFilter，我希望只有backgroundFilter是trasparent而overBackgroundFilter则没有。有任何想法吗？这是为ie8更改的css：

#backgroundFilter 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B8B9BB;
-moz-opacity: 0.50;
opacity: 0.50;
filter: alpha(opacity =50);
}

#overBackgroundFilter 
{
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 385px;
width: 400px;
background: #F8F8F8;
border-width: 6px;
border-color: #E0E0E0;
border-style: solid;
}

谢谢！

Answer 1

考虑使用

#backgroundFilter {
  ...
  background: rgba(184, 184, 184, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7FB8B8B8', endColorstr='#7FB8B8B8'); /* IE8 */
}

以下是类似问题CSS background opacity with rgba not working in IE 8

这是jsFiddle与该修复 - jsfiddle.net/HjJB6/4。这里有一个演示链接，可以用于IE8 fiddle.jshell.net/HjJB6/4/show（主jsFiddle页面不支持IE8）。

CSS popup div unlickable后台内容，只在ie8工作？

1 个答案: