CSS 필터 속성

정의와 사용법

filter 속성은 요소(일반적으로 <img>)의 시각 효과(예: 불투명도와 풍부도)를 정의합니다.

추가로 참조:

CSS 강의:CSS 이미지

HTML DOM 참조 설명서:filter 속성

예제

모든 이미지를 흑백으로 변경하십시오 (100% 회색):

img {
  filter: grayscale(100%);
}

직접 시험해 보세요

훌륭한 팁:페이지 하단에서 더 많은 TIY 예제를 찾을 수 있습니다.

CSS 문법

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

훌륭한 팁:여러 필터를 사용하려면 각 필터 사이에 공백을 두고( 페이지 아래의 더 많은 예제를 참조하세요).

기술 세부 사항

기본 값: none
thừa kế: 아니요
애니메이션 제작: 지원됩니다. 참조:애니메이션 관련 속성
버전: CSS3
JavaScript 문법: object.style.filter="grayscale(100%)"

필터 함수

주석:백분율 값(예: 75%)의 필터를 사용하며, 이 값이 δεcimal(예: 0.75)도 허용됩니다.

필터 설명
none 기본 값입니다. 효과를 지정합니다.
blur(px)

이미지에 흐림 효과를 적용합니다. 큰 값은 더 많은 흐림을 생성합니다.

지정된 값이 있으면 0을 사용합니다.

brightness(%)

이미지의 밝기를 조정합니다.

  • 0%는 이미지가 완전히 검게 변합니다.
  • 기본 값은 100%로, 원본 이미지를 나타냅니다.
  • 100% 이상의 값은 더 밝은 결과를 제공합니다.
contrast(%)

이미지의 대비도를 조정합니다.

  • 0%는 이미지가 완전히 검게 변합니다.
  • 기본 값은 100%로, 원본 이미지를 나타냅니다.
  • 100% 이상의 값은 더 높은 대비도의 결과를 제공합니다.
drop-shadow(h-shadow v-shadow blur spread color)

이미지에 그림자 효과를 적용합니다.

가능한 값:

  • h-shadow - 필수입니다. 수평 그림자의 픽셀 값을 지정합니다. 음수는 그림자를 이미지의 왼쪽에 배치합니다.
  • v-shadow - 필수입니다. 수직 그림자의 픽셀 값을 지정합니다. 음수는 그림자를 이미지 위에 배치합니다.

blur - 선택 사항입니다. 이는 세 번째 값으로, 단위는 픽셀입니다. 그림자에 흐림 효과를 추가합니다. 값이 클수록 더 많은 흐림이 생성되며(그림자가 더 크고 밝아집니다). 음수는 허용되지 않습니다. 값이 지정되지 않으면 0(그림자의 경계가 매우 뚜렷합니다)이 사용됩니다.

spread - 선택 사항입니다. 이는 네 번째 값으로, 단위는 픽셀입니다. 양수는 그림자가 확장되고 더 커지게 합니다. 음수는 그림자가 축소되게 합니다. 값이 지정되지 않으면 0(그림자가 요소의 크기와 같습니다)이 사용됩니다.

주석:Chrome, Safari, Opera, 그리고 다른 브라우저도 4번째 길이를 지원하지 않습니다; 추가하면 표시되지 않습니다.

color - 선택 사항입니다. 그림자에 색상을 추가합니다. 지정하지 않으면 색상은 브라우저에 따라 다릅니다(대부분 검은색입니다).

이 예제는 빨간 그림자를 생성하며, 수평과 수직 방향 모두 8px로, 10px의 흐림 효과가 있습니다:

filter: drop-shadow(8px 8px 10px red);

훌륭한 팁:이 필터는 box-shadow 속성과 유사합니다。

grayscale(%)

이미지를 그레이스케일로 변환합니다。

  • 0% (0)는 기본 값으로 원본 이미지를 나타냅니다。
  • 100%는 이미지가 완전히 흰색으로 변할 것입니다。(백과 이미지에 사용)

주석:부정 값은 허용되지 않습니다。

hue-rotate(deg)

이미지에 색상 톤 회전을 적용합니다. 이 값은 색상 톤의 도를 정의합니다. 기본 값은 0deg로 원본 이미지를 나타냅니다。

주석:최대 값은 360deg입니다。

invert(%)

이미지의 샘플을 반전합니다。

  • 0% (0)는 기본 값으로 원본 이미지를 나타냅니다。
  • 100%는 이미지가 완전히 반전됩니다。

주석:부정 값은 허용되지 않습니다。

opacity(%)

이미지의 불투명도 수준을 설정합니다。opacity-level은 투명도 수준을 설명하며:

  • 0%는 완전 투명입니다。
  • 100% (1)는 기본 값으로 원본 이미지(불투명)을 나타냅니다。

주석:부정 값은 허용되지 않습니다。

훌륭한 팁:이 필터는 opacity 속성과 유사합니다。

saturate(%)

이미지의 포화도를 설정합니다。

  • 0% (0)는 이미지가 완전히 과대포화되지 않도록 합니다。
  • 100%는 기본 값으로 원본 이미지를 나타냅니다.
  • 100% 이상의 값은 과대포화된 결과를 제공합니다。

주석:부정 값은 허용되지 않습니다。

sepia(%)

이미지를 브라운으로 변환합니다。

  • 0% (0)는 기본 값으로 원본 이미지를 나타냅니다。
  • 100%는 이미지가 완전히 브라운으로 변할 것입니다。

주석:부정 값은 허용되지 않습니다。

url();

url() 함수는 SVG 필터의 XML 파일 위치를 정의하며, 특정 필터 요소에 대한 앵커를 포함할 수 있습니다. 예제:

filter: url(svg-url#element-id);

initial 이 속성을 기본 값으로 설정합니다。 참조 initial
inherit 부모 요소에서 이 속성을 继承합니다。 참조 inherit

더 많은 예제

흐림 예제

이미지에 흐림 효과를 추가합니다:

img {
  filter: blur(5px);
}

직접 시험해 보세요

흐림 예제 2

배경 이미지를 흐림으로 적용합니다:

img.background {
  filter: blur(35px);
}

직접 시험해 보세요

밝기 예제

이미지의 밝기를 조정합니다:

img {
  filter: brightness(200%);
}

직접 시험해 보세요

대비 예제

이미지의 대비를 조정합니다:

img {
  filter: contrast(200%);
}

직접 시험해 보세요

그림자 예제

이미지에 그림자 효과를 적용합니다:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

직접 시험해 보세요

그레이스케일 예제

이미지를 그레이스케일로 변환합니다:

img {
  filter: grayscale(50%);
}

직접 시험해 보세요

색상 회전 예제

이미지에 색상 회전을 적용합니다:

img {
  filter: hue-rotate(90deg);
}

직접 시험해 보세요

반전 예제

이미지의 샘플을 반전합니다:

img {
  filter: invert(100%);
}

직접 시험해 보세요

불투명도 예제

이미지의 불투명도 수준을 설정합니다:

img {
  filter: opacity(30%);
}

직접 시험해 보세요

풍부도 예제

이미지의 풍부도를 조정합니다:

img {
  filter: saturate(800%);
}

직접 시험해 보세요

갈색 예제

이미지를 갈색으로 변환합니다:

img {
  filter: sepia(100%);
}

직접 시험해 보세요

다중 필터 사용

여러 필터를 사용하려면 각 필터를 공백으로 구분하세요. 순서가 중요합니다(예: sepia() 다음에 grayscale()를 사용하면 완전히 회색의 이미지가 생성됩니다):

img {
  filter: contrast(200%) brightness(150%);
}

직접 시험해 보세요

모든 필터

모든 필터 함수를 시연합니다:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

직접 시험해 보세요

브라우저 지원

표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

prefix를 사용하는 첫 번째 버전의 숫자는 -webkit-를 포함하고 있습니다.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

주석:4.0에서 8.0까지의 더 오래된 인터넷 익스플로어어 버전은 폐지된 비표준 "filter" 속성을 지원합니다. IE8 및 이하 버전의 지원이 필요할 때, 투명도에 주로 사용됩니다.