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のすべてが正常に動作しますが、オーバーレイは非常に遅いです。どのようなアイデアが来る？

EDIT： 私が不透明度とフィルタを使用するとき、このdivのすべても透明です。これは私が望んでいない。オーバーレイdivには別のdiv（DocAddCommentBox）があります。この部門には透明性がないかもしれません。どうすればこの問題を解決できますか？

EDIT：ソリューション：

.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は、アルファチャンネル/透明性を持っていますか？その場合は、透明度なしで試してください。メモリから、IEはそのようなものをレンダリングするのがひどく遅いです。

透明性のためにCSSを使用します。

そうのような設定の不透明度：

Opacity:0.5; 

残念ながらそれはIEでサポートされていないので、我々はまた、カスタムIEの属性を使用する必要があります。

filter: alpha(opacity=50); 

Answer 2

ここのIオーバーレイの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 3

不透明度の構文は必要ありません。透明画像を1ピクセルまたは2ピクセルより大きくする必要があります。最低20ピクセルは機能します。主に、background-repeatの画像、特に空のスペースを埋めるために何度も繰り返しがあるものはIE7を他のものよりもずっと遅くします。

Answer 4

私はまったく同じ問題を抱えていましたが、次の解決策は追加の不透明度属性を使用せずに完全に機能しました。それはまだIEがフィルタを使用する必要がありますが、私にはきれいに感じる。

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

IEフィルター勾配トリックと背景の不透明度属性を使用していないことの利点のための偉大な説明はPGがyesの3x3のPXについてですとtransparacyを持って

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