웹마스터 팁
[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
제목 | 글쓴이 | 날짜 |
---|---|---|
요즘 제가 jquery 웹앱 솔루션을 개발했습니다. [2] | 안드류KIM | 2018.04.03 |
jquery swiper | Ansi™ | 2017.02.16 |
jQuery 플러그인 모음 | Ansi™ | 2017.01.25 |
jquery 플러그인: rolVideo.min.js 공개하였습니다. [1] | 딴죽을거는남자 | 2015.10.03 |
jquery 이미지 이펙트 플러그인 | Ansi™ | 2014.08.19 |
jqm(jQuery Mobile) 사용 시 XE의 CSS 와 충돌할 때 | Canto | 2014.07.03 |
jquery 외부로드하기 [22] | DynamicLaser | 2014.04.07 |
[Jquery] input box border input | pell | 2014.03.21 |
[jQuery] 클릭하면 내용이 사라지는 방법 | 낮은자 | 2014.03.07 |
GNB 메뉴를 쉽게 만드는 jQuery plugin [2] | 김개발 | 2014.02.14 |
[jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제. | 투니페이퍼 | 2014.01.21 |
jQuery fadeIn 홈페이지 부드럽게 이동 [4] | 지그재거 | 2013.08.20 |
새로고침없이 페이지 리로딩 간단하고 쉽게 서버한테는 미안하게 하는법 (서버단이 아니고 스킨에 ㅠ jquery load씀) 게시글,댓글,추천등 모든 부분다가능합니다. [2] | 장포크 | 2013.08.08 |
팝업모듈에서 jQuery 충돌 해결 - 팝업창이 안뜰때. [5] | 똑디 | 2013.03.22 |
jQuery 강의 #2. 셀렉터에 스타일을 적용해보자. | 서기 | 2011.03.08 |
jQuery 강의 #1. css에 대해 이해해보자. [1] | 서기 | 2011.03.03 |
XE에서 jQuery의 $를 쓸 때에 대한 문제 [7] | Hide_D | 2009.11.21 |