*알파필터의 속성
[예제]
<P align="center">
<IMG src="img01.jpg">
<FONT color="white">원본이미지</FONT><BR><BR>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=0,finishOpacity=0)">
<FONT color="white">투명이미지1</FONT>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=1,finishOpacity=0)">
<FONT color="white">투명이미지2</FONT><BR><BR>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=2,finishOpacity=0)">
<FONT color="white">투명이미지3</FONT>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=3,finishOpacity=0)">
<FONT color="white">투명이미지4</FONT><BR><BR>
</P>
[결과]
[글자도 아래와같이 투명도를 줄수있다 속성값을 변경하여 연습]
<P align="center">
<FONT color="yellow">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=0,finishOpacity=0)">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=1,finishOpacity=0)">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=2,finishOpacity=0)">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=3,finishOpacity=0)">문자 투명도</FONT>
</P>
*blur필터 : 이미지나 글자르 흐릿하게 만드는 필터
[예제]
<P align="center">
<IMG src="img02.jpg"><BR>
<IMG src="img02.jpg" style="filter:blur(add:0,direction:135,strength:20)"><BR>
<IMG src="img02.jpg" style="filter:blur(add:1,direction:135,strength:20)"><BR>
<IMG src="img02.jpg" style="filter:blur(direction:135,strength:5)">
</P>
[결과]
*glow필터 : 지정하는 색으로 번짐효과
[예제]
<P align="center">
<FONT color="yellow" size="5">아치의 넋두리</FONT><BR><BR><BR>
<FONT color="yellow" style="width:300;font-size:18pt;filter:glow(color:red,strength:5)">
아치의 넋두리</FONT>
</P>
[결과]
속성 | 기능 |
opacity | 불투명도를 조정,속성값0~100,값이 작을수록 투명해진다 예)<img src="img01.jpg" style="filter:alpha(opacity=50)"> |
style | 투명도의 모양,0(단일형) 1(선형) 2(타원형) 3(직사각형) 예)<img src="img01.jpg" style="filter:alpha(opacity=50,style=0)"> |
finishOpacity | 투명도가 끝나는 지점의 투명도,속성값0~100 예)<img src="img01.jpg" style="filter:alpha(opacity=50,style=0,finishOpacity=0)"> |
[예제]
<P align="center">
<IMG src="img01.jpg">
<FONT color="white">원본이미지</FONT><BR><BR>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=0,finishOpacity=0)">
<FONT color="white">투명이미지1</FONT>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=1,finishOpacity=0)">
<FONT color="white">투명이미지2</FONT><BR><BR>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=2,finishOpacity=0)">
<FONT color="white">투명이미지3</FONT>
<IMG src="img01.jpg" style="filter:alpha(opacity=50,style=3,finishOpacity=0)">
<FONT color="white">투명이미지4</FONT><BR><BR>
</P>
[결과]
원본이미지
투명이미지1
투명이미지2
투명이미지3
투명이미지4
[글자도 아래와같이 투명도를 줄수있다 속성값을 변경하여 연습]
<P align="center">
<FONT color="yellow">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=0,finishOpacity=0)">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=1,finishOpacity=0)">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=2,finishOpacity=0)">문자 투명도</FONT><BR>
<FONT color="yellow" style="width:200; height:50; filter:alpha
(opacity=100,style=3,finishOpacity=0)">문자 투명도</FONT>
</P>
*blur필터 : 이미지나 글자르 흐릿하게 만드는 필터
속성 | 기능 |
add | 0은 완전흐림상태,1은 불완전흐림상태 예) <img src="img02.jpg" style="filter:blur(add:0)"> |
direction | 각도 방향설정,속성값 0~315 예) <img src="img02.jpg" style="filter:blur(add:0,direction:135)"> |
strength | 강도수치 조절,속성값 0~100 예) <img src="img02.jpg" style="filter:blur(add:0,direction:135,strength:20)"> |
[예제]
<P align="center">
<IMG src="img02.jpg"><BR>
<IMG src="img02.jpg" style="filter:blur(add:0,direction:135,strength:20)"><BR>
<IMG src="img02.jpg" style="filter:blur(add:1,direction:135,strength:20)"><BR>
<IMG src="img02.jpg" style="filter:blur(direction:135,strength:5)">
</P>
[결과]
*glow필터 : 지정하는 색으로 번짐효과
속성 | 기능 |
color | 지정된 색으로 번짐 효과주기 예) <font color="yellow" style="width:250;font-size:12pt;filter:glow(color:red)"> |
strength | 이미지나 글자의 번지는 강도,속성값 1~100 예) <font color="yellow" style="width:250;font-size:12pt;filter:glow(color:red,strength:5)"> |
[예제]
<P align="center">
<FONT color="yellow" size="5">아치의 넋두리</FONT><BR><BR><BR>
<FONT color="yellow" style="width:300;font-size:18pt;filter:glow(color:red,strength:5)">
아치의 넋두리</FONT>
</P>
[결과]
'computer' 카테고리의 다른 글
HTML 태그 - 8 (1) | 2009.10.11 |
---|---|
HTML 태그 - 7 (0) | 2009.10.11 |
HTML 태그 - 5 (0) | 2009.10.10 |
HTML 태그 - 4 (0) | 2009.10.08 |
HTML 태그 - 3 (0) | 2009.10.08 |