세상을 개발하는 남자

[원문 - http://robby.egloos.com/1200034]

마이크로 소프트에서 제공하는 AlphaImage Loader를 어떻게 사용하는지 알아보겠습니다.
이걸 사용하는 이유는 png 형식의 이미지는 IE7과 FF(Fire Fox)에서는 지원을 하지만 문제는
IE6에서는 지원을 안하고 있습니다. 아쉬운데로 아래와 같은 필터를 사용하는 수 밖에요


예제 소스는 아래와 같습니다. 

이미지에 알파값을 주고 싶을때
.class이름 {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/img/header_banner_img.png',     
    sizingMethod='crop'); 
}

레이어를 투명하게 하고 싶을때

<DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;         
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >
</DIV>

간단하게 이미지 경로와 크기 조절하는 것을 삽입했습니다.
이렇게 넣으면 이미지 본래 이미지대로 표시하게 됩니다.

sizingMethod : 

Sets or retrieves the manner in which to display an image within the boundary of the object that the AlphaImageLoader filter is applied to.
위에 영문으로 써 놓았는데 요약하자면, 그림을 어떻게 표시하겠느냐 하는 것이겠죠

종류로는 
- crop : Clips the image to fit the dimensions of the object. (원래 객체의(여기서는 이미지)에 크기 비율에 맞게 디스플레이 합니다.
- scale : Stretches or shrinks the image to fill the borders of the object. 상위의 객체에 꽉 체워 줍니다. 만일 이미지를 싸고 있는 레이어가 있다면 그 레이어에 크기에 맞게 그림이 좌악 늘어납니다.
- image : Default. Enlarges or reduces the border of the object to fit the dimensions of the image. 기본 설정값으로 본래의 이미지 크기로 보여줍니다.

http://www.w3.org/TR/CSS2/visuren.html#display-prop