CSS IE7缓慢叠加

Question

当我按下按钮时，会出现一个叠加层。在Firefox中，叠加很快，没什么特别的。但在IE7中，叠加非常慢。我很奇怪为什么？

这是我的CSS：

.DocOverlayShow
{
    background: url("/Graphics/overlay bg.png");
    top:0px; 
    left:0px; 
    width:100%; 
    position:fixed; 
    padding:10px; 
}
.DocAddCommentBox
{
    color: #000;
    margin:0 auto;
    margin-top: 200px;
    width: 650px;
}

单击按钮时激活叠加层。 IE中的所有内容都可以正常工作，但叠加速度太慢了。怎么会有任何想法？

编辑： 当我使用Opacity和过滤器时，此div上的所有内容也都是透明的。这我不想要。在叠加div上我有另一个div（DocAddCommentBox）。这个div可能没有透明度。我该如何解决这个问题？

编辑：解决方案：

.DocOverlayShow
{
    background-color: #0057C3;
    Opacity:0.5;
    filter: alpha(opacity=50); /*IE*/
    top:0px; 
    left:0px; 
    width:100%; 
    height: 100px;
    position:fixed; 
    padding:10px; 
    z-index: 1000;
}
.DocAddCommentBox
{
    background-color: #DBDBDB;
    color: #000;
    position: fixed;
    margin:0 auto;
    margin-top: 150px;
    width: 450px;
    z-index:2000;
}

在html中，我用过：

<div class="DocOverlayShow"></div>
<div class="DocAddCommentBox">Content</div>

Answer 1

你的overlay.png是否有alpha通道/透明度？如果是这样，请尝试没有透明度。从内存来看，IE渲染这样的东西非常慢。

我要做的是使用CSS来提高透明度。

设置不透明度如下：

Opacity:0.5;

不幸的是，它在IE中不受支持，因此我们还必须使用自定义IE属性：

filter: alpha(opacity=50);

Answer 2

您不需要不透明度语法，您需要做的就是使透明图像大于1px或2px，最小20px将起作用。主要是具有背景重复的图像，特别是具有许多重复的图像来填充空白区域，它们使IE7比其他图像慢得多。

Answer 3

这是我在项目中使用的叠加CSS：

#siteol {
  position: absolute;
  z-index:10000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.7;
}

<!--[if IE]>
/* style for IE */
<style type="text/css">
#siteol  {
  filter: alpha(opacity=70);
}
</style>
<![endif]-->

刚刚摆脱PNG。

Answer 4

我遇到了完全相同的问题，以下解决方案完美运行，无需使用额外的opacity属性。它仍然需要IE使用过滤器，但对我来说感觉更干净。

background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');

IE过滤器渐变技巧和不在背景上使用不透明度属性的好处的一个很好的解释可以在下面找到

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/