Robby in New Zealand

마이크로 소프트에서 제공하는 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. 기본 설정값으로 본래의 이미지 크기로 보여줍니다.