PNG-24

말자 전체게시물 작성일13-04-27 03:53 조회11,195회

본문

IE6~5.5에서 PNG-24 이미지를 전경과 배경에 동시에 사용하려는 경우 예전에 포스팅 했던 ‘IE6에서 PNG-24의 투명/반투명 색을 바르게 표현하기‘ 라는 글을 참조하시면 됩니다. 그런데 전경으로는 사용하지 않고 오직 배경으로만 사용하려는 경우 저 팁을 적용하기에 불편함이 예상 됩니다. 별도의 iengfix.htc 파일과 blank.gif 파일을 요구하기 때문이죠. 하지만 PNG-24 이미지를 배경으로만 사용할 것이 확실시 된다면 굳이 저렇게 복잡하게 하지 않아도 됩니다. 이미 널리 알려진 팁인데 제 블로그에 적어두질 않아서 간단하게 포스팅 합니다. IE6~5.5 브라우저에만 대응하는 간단한 코드를 작성하고 CSS Hack으로 처리하는 방법 입니다.

 

PNG-24 이미지를 배경으로만 처리하려는 경우 CSS 코드를 다음과 같이 작성 하면 IE6~5.5 브라우저에서 PNG-24 배경 이미지를 정상적으로 렌더링 합니다.

 

.selector{background:url(png24.png)undefined; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');} 

 

filter에 적용할 이미지의 src 경로를 상대경로로 지정하는 경우 background:url과 같이 CSS 파일을 기준으로 적용하면 안됩니다. filter에 적용하는 이미지의 경로는 HTML 문서를 기준으로 설정하여야 합니다. 즉, background의 이미지와 filter에 적용하는 이미지는 같은 이미지라 할지라도 경로의 기준이 CSS와 HTML으로 각각 서로 다르므로 이점 유의하여 적용하세요.

 

PNG-24를 정상적으로 렌더링 하는 표준계열 브라우저(Firefox, Opera, Safari, Chrome, IE7~8)에서는 다음과 같이 작용 합니다.

 

.selector{background:url(png24.png)undefined; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');}

 

PNG-24를 정상적으로 렌더링 하지 못하는 IE6~5.5 브라우저에서는 다음과 같이 작용 합니다.

 

.selector{background:url(png24.png)undefined; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');}

 

언더바 ‘_’ 핵을 사용하여 IE6~5.5 브라우저에만 MS 전용 CSS Filter를 적용하는 방법입니다.

 

PNG-24 관련 CSS Hack 에 공통으로 발견되는 알려진 버그

이 핵 또한 다른 PNG-24 핵들과 마찬가지로 배경이미지의 배치를 원하는 곳에 할 수 없다는 것과 배경이미지의 반복이 불가능 하다는 문제가 있습니다. 배치는 기본값인 backgroun-position:left top 으로 설정이 되며 반복은 background-repeat:no-repeat 상태가 되므로 참고하세요.

 

IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.

 

배경이 적용되는 요소에 haslayout 속성이 없는 경우 filter가 제대로 표현되지 않아 이미지가 보이지 않습니다. 경로는 분명히 맞는데 이미지가 보이지 않으면 width 또는 height 또는 zoom:1 속성을 추가로 적용해 보세요.

 

출처 : naradesign

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 1 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 70 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 82 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 112 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 97 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 97 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 141 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 97 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 328 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 116 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 78 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 177 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1414 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1679 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1059 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4196 추천: 15
게시물 검색