CSS 필터

2020-11-05

HTML & CSS / CSS

filter 속성은 흐림 효과, 색상 변형 등 이미지 비주얼 효과를 정의한다. CSS 표준은 미리 정의된 효과를 내는 몇가지 함수를 포함하고 있으며, SVG 필터 요소에 대한 URL 참조를 사용하여 SVG 필터를 적용할 수도 있다. hue-rotate()는 0deg-360deg까지 표현한다.

특징	설명
기본값	filter: none
상속	안됨
애니메이션	안됨
적용	─
버전	CSS3

문법

1
2
3

filter :
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

속성

속성값	설명
none	아무런 효과를 주지 않는다.
blur(px)	이미지의 블러 효과 설정
brightness(%)	이미지의 밝고 어두움 정도를 설정
contrast(%)	이미지의 대비를 설정
drop-shadow()	이미지의 그림자를 설정
grayscale(%)	이미지의 그레이스케일을 설정
hue-rotate(deg)	이미지의 색조를 설정
invert(%)	이미지를 반전
opacity(%)	이미지의 투명도를 설정
saturate(%)	이미지의 채도를 설정
sepia(%)	이미지의 세피아 효과를 설정
url()	이미지의 경로를 설정
inherit	filter의 속성 값을 상위요소한테 상속받는다.

속성 조합

여러 개의 속성을 조합하여 랜더링을 조작할 수 있다.

1 2	// 이미지의 대비와 밝기를 높인다 filter: contrast(175%) brightness(103%);

REFERENCE