CSS로 filter 값 추가하여 효과내기

css를 이용하여 이미지에 filter 효과를 줄 수 있다.

대표적으로 투명도, 블러(blur)나 흑백 효과 같은 것을 줄 수 있으며 

수치는 0부터 점차 커질수록 효과를 많이 줄 수 있다.

 

 

none	기본 값, 효과 없음
blur(px)	이미지에 흐림 효과를 적용 값이 클수록 더 흐릿해지며 값을 지정하지 않으면 0으로 인식합니다.
brightness(%)	이미지의 밝기를 조정 0%는 이미지를 완전히 검은색으로 만듭니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다. 100%를 초과하는 값은 더 밝은 결과를 제공합니다.
contrast(%)	이미지의 대비를 조정합니다. 0%는 이미지를 완전히 검은색으로 만듭니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다. 100%를 초과하는 값은 더 많은 대비와 함께 결과를 제공합니다.
drop-shadow(h-shadow v-shadow blur spread color)	이미지에 그림자 효과를 적용합니다. 가능한 값: h-shadow : 필수값. 수평 섀도우에 대한 픽셀 값을 지정합니다. 음수 값은 그림자를 이미지 왼쪽에 배치합니다. v-shadoe : 필수값. 수직 그림자의 픽셀 값을 지정합니다. 음수 값은 그림자를 이미지 위에 배치합니다. 블러 : 선택 사항. 이 값은 세 번째 값이며 픽셀 단위여야 합니다. 그림자에 블러 효과를 추가합니다. 값이 클수록 더 흐릿해집니다(그림자가 커지고 가벼워짐). 음수 값은 허용되지 않습니다. 값을 지정하지 않으면 0으로 인식됩니다(그림자의 가장자리가 날카롭습니다). 스프레드 : 옵션값. 이 값은 네 번째 값이며 픽셀 단위여야 합니다. 양수 값은 그림자가 넓게 커지며 음수 값은 그림자를 축소. 값을 지정하지 않으면 0으로 인식(그림자는 요소와 동일한 크기). * Chrome, Safari 및 Opera 및 기타 브라우저는 이 4번째 길이를 지원하지 않는다. 추가해도 렌더링되지 않음. 색상 : 선택 사항. 그림자에 색을 추가합니다. 지정되지 않은 경우 색상은 브라우저에 따라 달라집니다(대개 검은색). 가로와 세로로 모두 8px 크기의 빨간색 그림자를 만들고 10px의 블러 효과를 나타내는 예: filter: drop-shadow(8px 8px 10px red); * 이 필터는 box-shadow 속성과 유사.
grayscale(%)	이미지를 흑백 이미지로 변환합니다. 0%(0)는 기본값이며 원본 이미지를 나타냅니다. 100%는 이미지를 완전히 회색으로 만듭니다(검은색 및 흰색 이미지에 사용). * 음수 값은 허용되지 않습니다.
hue-rotate(deg)	이미지에 명도,채도 반전 적용. 0이 기본값이며, 원본 이미지를 나타냅니다. * 최대값은 360도입니다.
invert(%)	이미지의 색상 반전 적용. 0%(0)는 기본값이며 원본 이미지를 나타냅니다. 100%를 선택하면 이미지가 완전히 반전됩니다. * 음수 값은 허용되지 않습니다.
opacity(%)	이미지의 불투명도를 설정. 불투명도 수준은 다음과 같은 경우 투명도를 설명합니다. 0%는 완전히 투명합니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다(투명성 없음). 참고: 음수 값은 허용되지 않습니다. * 이 필터는 opacity 속성과 유사합니다.
saturate(%)	이미지의 고유의 색상을 빼거나 더해주는 효과 0%(0)이면 이미지가 완전히 지워집니다. 100%는 기본값이며 원본 이미지를 나타냅니다. 100% 이상의 값은 기본 색상보다 짙은 색상을 제공합니다. * 음수 값은 허용되지 않습니다.
sepia(%)	이미지를 세피아로 변환. 0%(0)는 기본값이며 원본 이미지를 나타냅니다. 100%는 이미지를 완전히 세피아로 만듭니다. * 음수 값은 허용되지 않습니다.
url()	url() 함수는 SVG 필터를 지정하는 XML 파일의 위치를 사용하며 특정 필터 요소에 대한 앵커를 포함할 수 있습니다. 예: filter: url(svg-url#dam-id)
initial	이 속성을 기본값으로 설정합니다.
inherit	상위 요소에서 이 속성을 상속합니다.

* 백분율 값 (예 : 75 %)을 사용하는 필터는 값을 소수 (예 : 0.75)로도 가능

 

 

 

ex.

li:hover img{filter: blur(5px);-webkit-filter: blur(5px);}

 

 

 

www.w3schools.com/cssref/css3_pr_filter.asp

CSS filter Property

 

test.

www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=none

Playit