인터넷정보

필터 효과

알 수 없는 사용자 2007. 10. 18. 14:02
- 필터 효과 -

- 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()">
반응형