filter 속성은 이미지의 비쥬얼 효과를 정의합니다.
Summary
특징 |
설명 |
기본 값 |
none |
상속 |
안됨 |
애니메이션 |
가능 |
버전 |
CSS3 |
Definition
- filter 속성은 이미지의 비쥬얼 효과를 정의합니다.
- hue-rotate()는 0deg~360deg까지 표현합니다.
Syntax
filter : none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Property
속성 값 |
설명 |
none |
이미지의 아무런 효과를 주지 않습니다. |
blur(px) |
이미지의 블러 효과를 설정합니다. |
brightness(%) |
이미지의 밝고 어두움 정도를 설정합니다. |
contrast(%) |
이미지의 대비를 설정합니다. |
drop-shadow() |
이미지의 그림자를 설정합니다. |
grayscale(%) |
이미지의 그레이스케일를 설정합니다. |
hue-rotate(deg) |
이미지의 색조를 설정합니다. |
invert(%) |
이미지를 반전합니다. |
opacity(%) |
이미지의 투명도를 설정합니다. |
saturate(%) |
이미지의 채도를 설정합니다. |
sepia(%) |
이미지의 세피아 효과를 설정합니다. |
url() |
이미지의 경로를 설정합니다. |
inherit |
filter의 속성 값을 상위요소한테 상속받습니다. |
Compatibility
Sample
Sample : Blur
Sample : Brightness
Sample : Contrast
Sample : Grayscale
Sample : Hue-rotate
Sample : Invert
Sample : Opacity
Sample : Saturate
Sample : Sepia