Медленное наложение CSS IE7
-
08-07-2019 - |
Вопрос
Когда я нажимаю кнопку, появляется наложение.В 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>
Решение
Есть ли у вашего overlay.png альфа-канал / прозрачность?Если да, попробуйте сделать это без прозрачности.Из памяти IE ужасно медленно рендерит такие вещи.
Что бы я хотел сделать, так это использовать CSS для прозрачности.
Установите непрозрачность следующим образом:
Opacity:0.5;
К сожалению, это не поддерживается в IE, поэтому нам также приходится использовать пользовательский атрибут IE:
filter: alpha(opacity=50);
Другие советы
вам не нужен синтаксис непрозрачности, все, что вам нужно сделать, это сделать ваши прозрачные изображения больше 1px или 2px, подойдет минимум 20px.В основном, изображения с фоновым повтором и особенно те, которые имеют много повторов для заполнения пустого пространства, они делают ваш IE7 намного медленнее, чем другие.
вот 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.
У меня была точно такая же проблема, и следующее решение работало отлично, не играя с дополнительным атрибутом непрозрачности.Это по-прежнему требует, чтобы IE использовал filter, но мне кажется, что он чище.
background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');
Отличное объяснение трюка с градиентом IE filter и преимуществ отказа от использования атрибута opacity на фоне можно найти ниже