CSS IE7 느린 오버레이

버튼을 누르면 오버레이가 나타납니다. Firefox에서는 오버레이가 빠르며 특별한 것은 없습니다. 하지만 IE7에서는 오버레이가 매우 느립니다. 왜 그런지 궁금 했어? 내가 버튼을 클릭하면CSS IE7 느린 오버레이

.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; 
}

이 오버레이가 활성화 :

여기 내 CSS입니다. 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>

출처

2009-03-10 Martijn

이 overlay.png 알파 채널/투명성이 있습니까? 그렇다면 투명성없이 시도하십시오. 메모리에서, IE는 그런 것들을 렌더링하는데 끔찍하게 느리다.

투명성을 위해 CSS를 사용하고 있습니다.

설정 불투명도과 같이 :

Opacity:0.5;

불행하게도이 IE에서 지원되지 않는, 그래서 우리는 또한 사용자 정의 IE 속성을 사용해야합니다 : 여기

filter: alpha(opacity=50);

출처

2009-03-10 09:22:44 ChadT

아래에서 찾을 수 있습니다. IE7에서 잘 작동하는 투명도 PNG를 어떻게 만들 수 있습니까? – Martijn

수 없습니다. 내가 할 것은 투명성을 위해 CSS를 사용하는 것이다. 불투명도를 다음과 같이 설정하십시오 : 'Opacity : 0.5;' 불행히도 IE에서는 지원되지 않으므로 맞춤 IE 속성 인 'filter : alpha (opacity = 50);'를 사용해야합니다. – ChadT

Thnx 시도해 보겠습니다. 모든 사이트가 그렇게합니까? 또는 .gif 또는 다른 것을 사용합니까? – Martijn

오버레이의의는 CSS를 그 I 내 프로젝트에서 사용 :

#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-10 10:05:00 Sergei

불투명도 구문이 필요하지 않으므로 투명한 이미지를 1px 또는 2px보다 크게 만들려면 최소 20px가 작동해야합니다. 주로 배경 반복을 사용하는 이미지와 빈 공간을 채우는 반복이 많은 이미지는 IE7을 다른 공간보다 훨씬 느리게 만듭니다.

출처

2010-10-31 09:37:58 Hirad

나는 똑같은 문제가 있었으며 다음과 같은 해결책이 추가 opacity 속성을 사용하지 않고 완벽하게 작동했습니다. 그것은 여전히 인터넷 익스플로러가 필터를 사용해야하지만, 깨끗한 느낌.

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

IE의 필터 그라데이션 트릭과 배경에 불투명도 속성을 사용하지 않는 이점에 대한 좋은 설명은 페이지가 예 3 × 3 픽셀에 대해이며 transparacy입니다있다

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

출처

2011-01-19 20:36:43 SigmaBetaTooth

CSS IE7 느린 오버레이

답변

관련 문제