Медленное наложение 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 of overlay, который я использовал в своем проекте:

#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 использовал filter, но мне кажется, что он чище.

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

Отличное объяснение трюка с градиентом IE filter и преимуществ отказа от использования атрибута opacity на фоне можно найти ниже

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