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>
해결책
오버레이.png에 알파 채널/투명성이 있습니까? 그렇다면 투명성없이 시도하십시오. 기억에서, 즉, 그런 것들을 렌더링하는 데 끔찍하게 느립니다.
내가 할 일은 투명성을 위해 CSS를 사용하는 것입니다.
그렇게 불투명도를 설정하십시오.
Opacity:0.5;
불행히도 IE에서는 지원되지 않으므로 사용자 정의 IE 속성을 사용해야합니다.
filter: alpha(opacity=50);
다른 팁
불투명도 구문이 필요하지 않습니다. 투명한 이미지를 1px 또는 2px보다 크게 만들면 최소 20px가 작동합니다. 주로 배경 반복과 특히 빈 공간을 채우기 위해 반복되는 많은 이미지가 다른 것보다 IE7을 훨씬 느리게 만듭니다.
여기 내 프로젝트에서 사용한 오버레이의 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를 제거하십시오.
나는 똑같은 문제를 겪었고 다음 솔루션은 추가 불투명 속성을 가지고 놀지 않고 완벽하게 작동했습니다. 여전히 필터를 사용하려면 IE가 필요하지만 더 깨끗한 느낌이 듭니다.
background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');
IE 필터 그라디언트 트릭에 대한 훌륭한 설명과 배경에 불투명 속성을 사용하지 않으면 이점이 아래를 참조하십시오.