Dr. CH_KIm Home
◀◀
        처음으로 ㅣ  병원 자료 ㅣ  의학 자료 ㅣ  태그 자료 ㅣ  일반 자료 ㅣ  음악 자료 ㅣ  일정표 |  북마크
태그 자료

CATEGORY
HTML (22)
JAVA (9)
CSS (3)
PHP (13)
ZERO (13)
FLASH (1)
Others (19)
Sample (23)
Style Sheet Filter - alpha

① 필터옵션 alpha 효과의 개략적인 내용
alpha효과란 내용의 투명도를 조절하는 필터값  (왼쪽은 소스이고 오른쪽은 실행화면입니다.)

메모장 브라우저(실행)
<font style="height:5;filter:alpha(Opacity:10,style:1,finishOpacity:100)">alpha효과 alpha효과


메모장 브라우저(실행)
<image src=kinoko.jpg>


<image src=kinoko.jpg style="filter:alpha(Opacity:10,style:1,finishOpacity:100)">
일반 이미지태그

필터적용 이미지태그

메모장 브라우저(실행)
<font style="height:5;filter:alpha(Opacity:10,style:1,finishOpacity:100)">alpha효과 alpha효과

<
font style="filter:alpha(Opacity:10,style:1,finishOpacity:100)">alpha효과

alpha효과

두번째 예제는 필터가 먹히지 않는것을 볼수가 있습니다. 글자에 필터를 입힐때는 범위의 옵션을 잡아줘야 합니다.

② 투명도를 조절 Opacity, FinishOpacity

Opacity는 alpha필터의 속성값으로 쓰입니다..

Opacity는 처음에 적용될 부분의 불투명도를 조절하는것이고 FinishOpacity 는 마지막에 끝날 부분의 불투명도를 조절하는 값입니다..
그 단위는 각각 0~100까지가 있죠. 0을 준다면 가장 투명하게 되는것이고 100을 준다면 가장 불투명하게 됩니다.


메모장 브라우저(실행)
<font style="height:5;filter:alpha(opacity:10,finishopacity:100,style:1)">alpha효과

<font style="color:purple;height:5;filter:alpha(opacity:10,finishopacity:100,style:1)">alpha효과
alpha효과



alpha효과

③ 투명한 모양을 조절 style속성값

style은 0~3까지의 값이 있습니다.

0은 처음의 opacity값을 끝까지 유지하는 값이고
1은 왼쪽은 opacity값에서 오른쪽의 finishopacity값으로 투명도 변화를 주는 값이죠.
2는 중앙의 opacity값에서 원형으로 바깥쪽의 finishopacity값으로 변화를 주는값이고
3은 x자 대각선의 opacity값에서 끝부분 변의 finishopacity값으로 변화를 주는 값입니다.


메모장 브라우저(실행)
<image src=kinoko.jpg style="filter:alpha(Opacity:5,style:0,finishOpacity:100)">

<
image src=kinoko.jpg style="filter:alpha(Opacity:5,style:1,finishOpacity:100)">

<
image src=kinoko.jpg style="filter:alpha(Opacity:5,style:2,finishOpacity:100)">

<
image src=kinoko.jpg style="filter:alpha(Opacity:5,style:3,finishOpacity:100)">
style=0 인 alpha필터

style=1 인 alpha필터

style=2 인 alpha필터

style=3 인 alpha필터

메모장 브라우저(실행)
<image src=kinoko.jpg style="filter:alpha(Opacity:100,style:2,finishOpacity:3)">alpha효과
  목록보기

  Editor | 산과계산기 |영어회화 관리자 | 주소록 | 웹하드  
Copyright 2003-2016 drchkim.com All rights reserved.