[스크랩] 이 미 지 꾸 미 기

우선은 간단히 글로만 설명드립니다~ㅎ
   이미지를 가지고 예를 드는 것은 이따 이따가~~
   시간이 나는대로 수정해서 올리겠습니다~^^*

※ 태그에서 대소문자 구분은 없습니다만,
   설명의 편의상 대소문자를 사용하였습니다..히~~



태그 예 :
<IMG STYLE="FILTER: alpha(opacity=100 style=2 finishopacity=0)" SRC="이미지 주소">
<IMG STYLE="FILTER: alpha(opacity=100, style=2, finishopacity=0)" SRC="이미지 주소">


alpha 필터는
이미지가 놓이는 곳의 배경색을
이미지에 투명하게 반영되도록 하는 투명도 필터입니다.

즉, 배경색이 이미지에 스며들게 한다고 생각하시면 되겠지요~


opacity 는 '불투명도'를 말하는데,
요게 참 헷갈리게 만들어요~ㅋ
투명도를 지정하려는데, '불'투명 정도를 수치화 하려니
자꾸 반대로만 생각되곤 해서 머리가 헷가닥~ 뒤로 돌곤 합죠~ㅋㅋ


opacity=100 은,
불투명도가 100%가 되도록 지정하는 것인데,
바꿔 말하면, 이미지 원판을 그대로 보여 주는 것 입니다.
이미지 밑의 배경색이 이미지에 스며들지 않도록 하는 것이죠.


finishopacity=0 이라 함은,
투명도가 적용되는 끝점에서의 불투명도를 0% (= 투명도 100 )
그러니까 이미지 밑의 배경색이 완전히 스며들어
이미지자체의 색상이 하나도 보이지 않고
이미지 밑바탕의 배경색만 나타나게 하는 것입니다.


투명도가 적용되는 시작점과 끝점은
style=숫자 에 따라 달라집니다.


style=1 이면,
이미지의 왼쪽에서 오른쪽으로 적용되는데
이미지의 왼쪽에서 opacity 가 적용되고,
오른쪽으로 가면서 finishopacity 의 값까지 점차적으로(linear 하게) 적용됩니다.


style=2 이면
둥근 원형으로 적용이 되는데,
중심점이 시작점이 되어 opacity의 값이 적용되고,
이미지의 가장자리에서 finishopacity 의 값으로 끝납니다.


style=3 이면
이미지의 대각선 방향으로 X 자 형태로 투명도가 적용됩니다.



참고로, style=0 으로 하면,
(opacity=70 style=0 finishopacity=25) 로 지정했다 해도,
opacity=숫자(70) 만 이미지 전체에 균일하게 적용됩니다.
이 경우는 아래와 같이 사용하시는 것이 간편합니다.


style=숫자 를 사용하지 않고,
단순히 opacity 값 하나만 덜렁~ 사용하면,
이미지 전체에 균일하게 투명도가 적용됩니다.

예를 들면,
style="FILTER: alpha(opacity=50)" 으로 하면,
이미지 전체가 반절 정도 투명하게 됩니다.


※ alpha 필터는 이미지 태그(img) 에만 적용되는 것이 아니고,
음악/동영상/스위시 에 사용되는 embed 태그 뿐 아니라,
테이블 태그(TABLE) 등에도 적용이 가능합니다.

    


filter: alpha(opacity=0 style=2 finishopacity=100)

♬ Too Love / 연우

출처 : 퐁당퐁당 하늘여울

글쓴이 : 보아스 원글보기

메모 :