0

当我按下一个按钮时，会出现一个叠加层。在 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 中的一切工作正常，但覆盖太慢了。有什么想法怎么来的？

编辑：当我使用不透明度和过滤器时，这个 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>
4

4 回答 4

2

您的 overlay.png 是否具有 Alpha 通道/透明度？如果是这样，请在没有透明度的情况下尝试。从记忆中，IE 在渲染这些东西时速度非常慢。

我要做的是使用 CSS 来实现透明度。

像这样设置不透明度：

Opacity:0.5;

不幸的是，IE 不支持它，所以我们还必须使用自定义 IE 属性：

filter: alpha(opacity=50);
于 2009-03-10T09:22:44.093 回答
2

你不需要 opacity 语法，你需要做的就是让你的透明图像大于 1px 或 2px，最小 20px 就可以了。主要是，带有背景重复的图像，特别是那些有很多重复以填充空白空间的图像，它们会使您的 IE7 比其他图像慢得多。

于 2010-10-31T09:37:58.623 回答
0

这是我在项目中使用的叠加层的 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。

于 2009-03-10T10:05:00.187 回答
0

我遇到了完全相同的问题，并且以下解决方案完美地工作，而无需使用额外的不透明度属性。它仍然需要 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/

于 2011-01-19T20:36:43.473 回答