웹프로그래머

.transparent {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

에코뷰 작업할때 유용하게 써먹었다.

옆 이미지 중 하단은 투명도가 들어간 배경이다.

- 설명 -

opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.

filter:alpha(opacity=50); This one you need for IE.

- 이 효과는 IE에서만 적용된다?

-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

- 이 효과는 네스케이프용?

-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

- 이건 사파리용?

윈도우에 내장된 Internet Explorer는 너무 싫다.

버전마다 차이가 너무 심하고 (html...) 그나마 제일 나은 8버전은 너무 느리다...

팝업창을 띄울때나 새로 실행시킬때의 속도란... 그래서 난 오페라 브라우저가 기본브라우저다.

아아.. 이 내용을 적으려던것은 아니고...

홈페이지를 만들다 보면 바탕색이랑 틀린 이미지를 올려야 할 경우가 생긴다.

그 이미지의 배경을 보여줘도 괜찮다면 상관이 없지만 보여주면 안될 경우에는 투명한 PNG포맷을 이용해야한다.

모든 브라우저에서 저 포맷을 그냥 지원해서 배경이 투명하게 보여지지만... 우리의 IE6님께서는 그런걸 용납하시질 못한다.

그래서 다른 방법을 써야 하는데 그 중 하나가 포토샵 자체에서 해결하는 방법이다.

[그림1] IE6에서 투명하게 보여지는 PNG파일

[그림2] IE6에서 배경이 하얗게 보여지는 PNG파일

현재 브라우저가 IE7 이상이거나 파폭등 다른 기종이라면 위 2개 이미지 모두 배경이 투명하게 보일것이다.

배경 부분은 양모서리에 라운드처리된 부분이다.

위의 파일 2개는 같은 PNG파일이지만 차이가 있다.

그림1은 indexed color. 256개의 색상만 표현이 가능하다.

그림2는 일반 RGB 모드이다.

차이는 라운드된 부분의 층이 생긴 정도로 알수있다.

만드는 방법은 그림1은 위와 같은 모습을 작업후 저장하기 직전에 메뉴에서 Image - Mode - Indexed Color을 선택하고 저장을 해주면된다.

그림2는 일반 png저장 방법과 같다.

이 방법을 알았을때 편하게 배경이 투명한 파일을 만들수 있겠구나 싶었는데 위의 결과물을 보고 좌절할 수 밖에 없었다. 제기랄...

저렇게 층이 보여지는 이미지를 배경이랍시고 홈페이지에 올릴수는 없단 말이다...

방법2... (이미지 파일명은 png.png로 가정)

1) 배경이미지로 넣을때

.png { background:url(png.png) no-repeat left top; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png.png',sizingMethod='crop'); }

div태그에 png클래스를 넣어주면 된다.

2) 그냥 이미지로 만들경우

.png img {_filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

<div class="png" style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png.png');">

     <img src="png.png" alt="" />

</div>

이것만 알면 ie6에서도 png는 사용가능하겠지!!!