필터 효과

- 필터 효과 -

- Alpha 효과 -
원본 이미지	style=1	style=2	style=3

style=1 -  <img src="이미지주소" style="filter:alpha(style=1, opacity=100, finishopacity=0)">
style=2 -  <img src="이미지주소" style="filter:alpha(style=1, opacity=100, finishopacity=0)">
style=3 -  <img src="이미지주소" style="filter:alpha(style=1, opacity=100, finishopacity=0)">

여기서 opacity=100 숫자가 낮아 질수록 투명해지고 숫자가 높을수록 원본과 가까워진다.

- Blue 효과 -
direction=45,strength=100	direction=90,strength=100	direction=135,strength=100	direction=225,strength=100

- 소스 -
<img src="이미지주소" style="filter:blur(direction=45,strength=100)">


direction - 흐리게 하는 방향을 지정해준다 (시계 방향으로 각도를 입력
strength - 수치가 낮을수록 투명해지고 수치가 클수록 원본 이미지에 가까워진다

 

- Gray 효과 -
원본이미지	적용시켰을 떄

- 소스 -
<img src="이미지주소" style="filter:gray()">

- fliph, flipv 효과 -
원본이미지	fliph	flipv

- 소스 -
<img src="이미지주소" style="filter:fliph()">
<img src="이미지주소" style="filter:flipv()">

fliph - 이미지의 좌우 바꾸기
flipv - 이미지의 상하 바꾸기

- invert 효과 -
원본 이미지	효과 적용시

- 소스 -
        <img src="이미지주소" style="filter:invert()">
명도와 채도의 색을 반대로 바꿔준다

- fliph, flipv 효과 -
원본이미지	1	2

- 소스 -
        1 -<img src="http://oxtag.com/zboard/data/gallery/baby_4.jpg" width="141" height="173" style="filter:wave(strength=8,freq=2,lightstrength=10,phase=50,add=0)">
2 - <img src="http://oxtag.com/zboard/data/gallery/baby_4.jpg" width="141" height="173" style="FILTER: wave(strength=5,freq=25,lightstrength=10,phase=50,add=0)">

 strength - 웨이브의 강도
freq -웨이브의 갯수
lightstrength - 빛의 강도
phase -웨이브가 시작될 위치를 지정해준다
add - 원본 이미지를 합칠 경우에는 0 아닐 경우에는 1

 

- xray 효과 -
원본 이미지	효과 적용

- 소스 -
<img src="이미지주소" style="FILTER: xray()">