코드랩 레퍼런스

filter 본문

CSS

filter

webstoryboy 2016. 6. 23. 12:44
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

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
filter

Sample













Sample : Blur












Sample : Brightness









Sample : Contrast









Sample : Grayscale








Sample : Hue-rotate










Sample : Invert








Sample : Opacity








Sample : Saturate










Sample : Sepia








Ad

Comments