CSS IE7 langsam Overlay

Question

Wenn ich eine Taste drücken ein Overlay angezeigt. In Firefox ist die Überlagerung schnell, nichts Besonderes. Aber in IE7 ist die Auflage sehr langsam. Ich war Wunder, warum?

Hier ist meine 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;
}

Das Overlay aktiviert wird, wenn ich auf eine Schaltfläche klicken. Alles in IE funktioniert gut, aber das Overlay ist soooo langsam. Irgendwelche Ideen, wie kommt das?

EDIT: Wenn ich Opazität und Filter verwenden, alles auf dieser div ist auch transparant. Das will ich nicht. Auf dem Overlay div habe ich ein anderes div (DocAddCommentBox). Dieses div nicht transparancy haben. Wie kann ich dieses Problem lösen?

EDIT: Lösung:

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

Und in html ich verwendet habe:

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

Answer 1

Hat Ihr Overlay.png haben einen Alphakanal / Transparenz? Wenn ja, versuchen Sie es ohne die Transparenz. Aus dem Gedächtnis, ist IE schrecklich langsam an solche Dinge zu machen.

Was ich tun würde, ist die Verwendung CSS für Transparenz.

Stellen Opazität wie folgt:

Opacity:0.5;

Leider ist es nicht in IE unterstützt wird, so haben wir auch ein benutzerdefiniertes IE Attribut verwenden:

filter: alpha(opacity=50);

Answer 2

Sie nicht die Opazität Syntax benötigen, alles, was Sie tun müssen, ist Ihre transparenten Bilder größer als 1px oder 2px, mindestens 20px arbeiten zu machen. Hauptsächlich Bilder mit background-repeat und speziell diejenigen, die viele Wiederholungen haben den leeren Raum füllen Sie Ihre IE7 viel langsamer als die anderen machen.

Answer 3

Hier ist die CSS-Overlay, die ich in meinem Projekt verwendet:

#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]-->

nur von der PNG loswerden.

Answer 4

Ich hatte genau die gleiche Problem und die folgende Lösung funktionierte perfekt, ohne mit dem zusätzlichen Opazität Attribute zu spielen. Es bedarf noch der IE-Filter zu verwenden, sondern fühlt sich sauberer zu mir.

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

Eine große Erklärung für den IE-Filter Gradienten Trick und Vorteile von nicht Opazität Attribut auf Hintergründe verwendet, kann unter

finden

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