PNG image in IE6

scale

image

crop




IE6의 투명 PNG에 대해서 상세히 알아 보겠습니다.
투명 PNG를 표시하는 css의 filter속성은 아래와 같이 기술 합니다.

							filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/florakid_lib/images/sample2/alpha.png',sizingMethod='scale');
						

IE의 독자적인 기능인 filter 속성에 "AlphaImageLoader"를 지정하고 투명 PNG를 읽어 들이고 있습니다. 간단한 기능에 비해 상당히 긴 구문입니다만 이 한줄은 꼭 기억해 두도록 합시다. AlphaImageLoader(src='...',sizingMethod='...') 안의 src에는 이미지의 패스를 지정하고 sizingMethod에는 아래와 같은 아미지의 표시 방법을 지정합니다.

- scale : 투명 PNG의 사이즈를 태그 사이즈에 맞춘다.
- Image : 태그의 사이즈를 투명 PNG 사이즈에 맞춘다.
- crop: 사이즈를 변경하지 않고 태그에 투명 PNG를 표시한다.

CSS의 background 속성의 동작이 다르기 때문에 보통 HTML 태그 사이즈 지정과 PNG 아미지 사이즈를 똑같이 해두고 "scale"과 "crop" 중에서 선택하도록 하는 것이 좋습니다. CSS의 background-image속성과 같이 background-repeat(반복)이나 background-position(표시 위치)은 지정할 수 없으므로 포시될 위치를 고려한 한 장의 이미지를 준비해둘 필요가 있

그 외에도 AlphaImageLoader를 이용할 때에는 몇 가지 중의할 사항이 있습니다. 그 중에 한 가지는 패스의 지정 방법입니다. CSS의 background 속성에 url을 지어할 때에는 CSS 파일로 부터 상대패스 또는 절대패스로 기술합니다만, AlphaImageLoader의 src 안의 파일 패스는 읽어 들여지는 HTML 파일로부터의 상대패스 또는 절대패스로 기술합니다.

또한 배경에 AlphaImageLoader를 설정한 태그는 자식태그나 손자태그의 링크나 click 이벤트, mouseover 이벤트, input 태그의 포커스가 유효하지 않게 됩니다. 그런 경우에는 자식 태그나 손자 태그의 position속성에 "relative"를 설정하면 a 태그의 링크나 포커스 등이 동작하게

AlphaImageLoader를 설정한 태그의 position 속성이 relative 또는 absolute의 경우는 그 자식태그에 relative를 설정해도 유효하지 않게 됩니다.