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

不透明度の構文は必要ありません。必要なのは、透明な画像を1pxまたは2pxより大きくすることだけです。最小で20pxが機能します。主に、バックグラウンドリピートのある画像、特に空のスペースを埋めるために多くのリピートがある画像は、IE7を他の画像よりもはるかに遅くします。

于 2010-10-31T09:37:58.623 に答える
2

overlay.png にはアルファ チャネル/透明度がありますか? その場合は、透過なしで試してみてください。メモリから、IE はそのようなものをレンダリングするのが恐ろしく遅いです。

私がやろうとしているのは、透過性のために CSS を使用することです。

次のように不透明度を設定します。

Opacity:0.5;

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

filter: alpha(opacity=50);
于 2009-03-10T09:22:44.093 に答える
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 に答える
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 に答える