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

오버레이.png에 알파 채널/투명성이 있습니까? 그렇다면 투명성없이 시도하십시오. 기억에서, 즉, 그런 것들을 렌더링하는 데 끔찍하게 느립니다.

내가 할 일은 투명성을 위해 CSS를 사용하는 것입니다.

그렇게 불투명도를 설정하십시오.

Opacity:0.5;

불행히도 IE에서는 지원되지 않으므로 사용자 정의 IE 속성을 사용해야합니다.

filter: alpha(opacity=50);

Answer 2

불투명도 구문이 필요하지 않습니다. 투명한 이미지를 1px 또는 2px보다 크게 만들면 최소 20px가 작동합니다. 주로 배경 반복과 특히 빈 공간을 채우기 위해 반복되는 많은 이미지가 다른 것보다 IE7을 훨씬 느리게 만듭니다.

Answer 3

여기 내 프로젝트에서 사용한 오버레이의 CS입니다.

#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/