웹마스터 팁

PNG투명 이미지에 animate나 opacity등의 함수를 걸 때 IE8이하의 브라우저에서

이미지 주위에 검은 찌꺼기(?)가 표현되는 현상이 발상한다.

이 때는 아래와 같이 PNG 이미지에 Transparent CSS를 적용해 주고,

Opacity의 경우 PNG 이미지를 직접 제어하지 말고, DIV부모 엘리먼트로 감싸 주어 DIV로 Opacity등의 효과를 줌으로

해결할 수 있다.

다만, IE9 이상의 브라우저에서 보여지는 정갈함 까지는 표현하기 힘들다는 점을 명심하자.

(이미지에 흰색 Outer Glow를 준 경우, 검정 Outer Glow로 표현된다.)

 

--

 

PNG이미지에 아래와 같은 CSS를 부여해 준다.

<style>

div > img{

background: transparent;

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /*IE6 & 7 */      
zoom: 1;

}

</style>

 

Opacity등의 설정을 할 경우, 이미지가 아닌, 부모 엘리먼트에 적용해준다.

<style>

div{

opacity:0;

filter:alpha(opacity=0); /*IE7~8*/

}

</style>

 

Opacity 가 0인 부모를 100%으로 animate 하는 경우

$("div").animate({ "opacity":1, "filter":"alpha(opacity=100)" });

제목 글쓴이 날짜
1.7.3.8 설치 후 위에 어드민바가 안 보이는 증상을 해결하는 방법. [2] 야옹이님 2014.01.22
싸이트 운영하면서 외부링크 차단하는방법 100% ok [12] 뭥미1 2009.07.10
APMSETUP7에서 PHP 버전 업그레이드 [1] YJSoft 2014.01.14
[jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제. 투니페이퍼 2014.01.21
룰셋 적용 팁 [1] file 루비스코 2014.01.20
게시판 설정의 게시판 정보 탭에서, 고급 항목이 항상 노출되도록 하는 방법 [3] sejin7940 2014.01.20
메뉴추가가 안돼요. [2] file 궁굼자 2014.01.20
짧은주소 사용시 긴주소 검색엔진 차단시키기 [10] Volun 2014.01.14
관리자가 무제한 추천 가능하게 하는 방법 [2] sejin7940 2014.01.17
[10원팁] 스케치북 추천/비추천/신고를 눈에 들어오게 socialskyo 2014.01.17
XE 전체 타이틀(title) 수정하기 [3] pezex 2014.01.16
IE의 깨짐현상(호환성보기 문제) [1] Volun 2014.01.14
업로드 용량을 .htaccess 파일로 제어하기 [9] 야옹이님 2014.01.15
[10원팁] 스케치북 서명란 크기 [5] socialskyo 2014.01.08
(table)에서 HTML 태그를 적용시켜 보기 [16] 정후니 2001.08.31
댓글 익명 문자열에 색상 부여하기 [6] XE만세 2014.01.07
파란/네이버/네이트온 메신저 이모티콘 다운로드 [1] socialskyo 2014.01.08
알림센터의 익명명칭을 anonoymous에서 다른 형태로 바꾸기 [1] jambox 2014.01.08
스케치북 게시판 사용시 "내용을 입력해주세요"라고 뜨면서 댓글 입력이 안될경우 체크해봐야할 사항 [1] socialskyo 2014.01.07
[수정] 댓글 삭제 간략화하기 [9] XE만세 2013.11.26