본문 바로가기

computer

HTML 태그 - 6

*알파필터의 속성
 속성  기능
 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