오늘은 투명한 이미지를 연출해 주는 이미지 필터 효과에 대해서 공부해 보도록 할까요?!.체크 정보방에 저희 아이들을 올린 뽀샤시한 이미지가 바로 이미지 필터 효과입니다.
제가 좋아하는 장미꽃 이미지로 설명을 하도록 할께요~~^^*
우선은 기본 사진이구요,아무 적용도 하지 않았습니다.
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=380,style=0,finshopacity=0);">
이것이 기본적인 이미지 필터 효과의 틀입니다.
<img src=
의 "=" 뒤에다 이미지의 주소(URL)을 넣으시면 되겠죠?!.그림이나 이미지 올리는 법은 [태그 3번]을 참조하세요.
그 다음,style="filter:alpha 은,이 투명하게 보이게 하는 필터 효과중에서 오늘은 알파 효과를 배워 봅니다.
style="filter:alpha 다음의 괄호 안이 제일 중요하겠네요.여러가지 효과를 바꾸어 주는 부분입니다.
opacity=
는 투명도를 나타내구요,숫자가 작아질수록 점점 더 투명하게 됩니다.
style=
은 0,1,2,3 의 네가지가 있구요,0은 기본 베이스,1번은 직선형,2번은 타원형,3번은 직사각형이고,제일 부드럽고 예쁜 것은 바로 타원형 2번이죠.
style=0
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=380,style=0,finshopacity=0);">
style=1
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=380,style=1,finshopacity=0);">
style=2
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=380,style=2,finshopacity=0);">
style=3
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=380,style=3,finshopacity=0);">
어때요?.분위기가 전혀 틀려지죠?! ^^*
다음은,투명도를 조절해 볼께요.opacity= 뒤에 숫자를 넣어 보겠습니다.
opacity= 20
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=20,style=2,finshopacity=0);">
opacity= 70
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=40,style=2,finshopacity=0);">
opacity= 250
<img src=http://www.song-a.com/zeroboard/data/work/rose06.jpg style="filter:alpha(opacity=200,style=2,finshopacity=0);">
기본 틀만 가지고 있으면 얼마든지 원하시는 뽀샤시한 이미지를 만드실 수 있겠죠?!.
그럼 즐거운 태그 공부 하시기 바랍니다 m__m ^^*
|
|
