묻고답하기
IE에서 투명도 설정에 대해 문제가 발생합니다
2010.01.30 17:27
다음과 같은 코드를 작성했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
html,body{margin:0;padding:0;width:100%;height:100%;}
body{background:url('img/bg1.jpg') center;}
div{margin:0;padding:0;position:absolute;}
#bg_space{width:100%;height:100%;display:none;}
#Content{width:100%;height:100%;}
.memo{width:25%;height:25%;background:url('img/Lines.png') repeat;}
#memo1{top:25%;left:15%; display:none;}
#memo2{top:25%;left:40%;}
</style>
<script type="text/javascript">
jQuery(function(){
setTimeout(function(){
jQuery("#bg_space").css("background","url('img/bg2.jpg') center").fadeIn(5000,function(){
jQuery("body").css("background","url('img/bg2.jpg') center");
jQuery("#bg_space").hide();
});
jQuery("#memo1").fadeIn(5000);
jQuery("#memo2").fadeOut(5000);
},1000);
});
</script>
</head>
<body>
<div id="bg_space"></div>
<div id="Content">
<div id="memo1" class="memo">히히힣?</div>
<div id="memo2" class="memo">후후훗?</div>
</div>
</body>
</html>제가 하려는 작업을 축소해놓은 버전입니다.
여기서는 자동으로 작동하지만 실제로는 버튼을 누를때 작동한다는 차이는 있지만 내부의 차이는 없습니다.
1. 배경 페이드
배경을 유지하기 위해서 #bg_space를 따로 두고 이것을 서서히 나타나게 한다음, 다 나타나면 body를 변경하고
#bg_space를 숨기도록 했습니다.
2. 객체 전환
객체1을 보이고 있다가 객체2로 서서히 전환합니다. 둘은 겹쳐있지 않습니다.
이렇게 나온 결과물이 위의 코드인데,
파이어폭스, 크롬에선 잘 작동하는데
IE에서 문제입니다.
IE6은 애초에 png 자체가 맛이 갔으니 제대로 돌아가지도 않으니 그렇다 치고
문제는 IE8에서 이렇게 나옵니다.
변경 되는 순간 IE8에선 '까맣게' 변해버리면서 투명이 적용되기 시작합니다.
원인을 모르겠습니다 -_-;;;
png 때문인지도 모르겠다는 생각은 듭니다만....
어떻게 고쳐야 좋을까요?
아니면
위의 방법 말고 비슷하게 이걸 구현할 수 있는 방법이 있을까요?
PS : 실제 파일 첨부합니다
댓글 1
-
저도 같은 문제가 납니다.. 투명이 있는 PNG24 파일에 투명도만 주면 검정으로 변하네요. ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" 하면 투명도는 먹는데, jquery로는 좀 어렵고...
