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

編集： 不透明度とフィルターを使用すると、この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にはアルファチャネル/透明度がありますか？その場合は、透明度なしで試してください。メモリから、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

まったく同じ問題があり、次のソリューションは、追加の不透明度属性を使用せずに完全に機能しました。 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/