웹마스터 팁
[jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제.
2014.01.21 15:41
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)" });
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
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] | 루비스코 | 2014.01.20 |
게시판 설정의 게시판 정보 탭에서, 고급 항목이 항상 노출되도록 하는 방법 [3] | sejin7940 | 2014.01.20 |
메뉴추가가 안돼요. [2] | 궁굼자 | 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 |