MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

필터

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

요약

filter 속성은 요소가 표시되기 전에 요소 렌더링시 흐림 또는 색상 이동과 같은 효과를 제공합니다. 필터는 일반적으로 이미지, 배경 또는 테두리의 렌더링을 조정하는 데 사용됩니다.

CSS 표준에는 미리 정의 된 효과를 얻는 몇 가지 기능이 포함되어 있습니다. SVG 필터 요소에 대한 URL을 사용하여 SVG에 지정된 필터를 참조 할 수도 있습니다.

Note: Older versions (4.0 through 9.0) of the Windows Internet Explorer browser supported a non-standard "filter" that has since been deprecated.

초기값none
적용대상all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
상속no
Mediavisual
Computed valueas specified
Animation typea filter function list
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법

filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Apply multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

기능을 사용하려면, 다음을 사용하십시오.

filter: <filter-function> [<filter-function>]* | none

SVG <filter> 요소에 대한 참조는 다음을 사용하십시오 :

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

Formal syntax

none | <filter-function-list>
where 
<filter-function-list> = [ <filter-function> | <url> ]+
where 
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
where 
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<sepia()> = sepia( <number-percentage> )
<saturate()> = saturate( <number-percentage> )
where 
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

예제

미리 정의 된 기능을 사용하는 예는 다음과 같습니다. 구체적인 예는 각 기능을 참조하십시오.

.mydiv { filter: grayscale(50%) }

/* gray all images by 50% and blur by 10px */
img {
  filter: grayscale(0.5) blur(10px);
}

SVG 리소스와 함께 URL 함수를 사용하는 예는 다음과 같습니다.

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

함수

CSS 필터 속성을 사용하려면 다음 기능 중 하나에 대한 값을 지정하십시오. 값이 유효하지 않으면 함수는 "none"을 반환합니다. 명시된 경우를 제외하고 백분율 기호 (34 %)로 표시된 값을 취하는 함수는 십진수로 표현 된 값 (0.34 에서처럼)도 허용합니다.

url()

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

filter: url(resources.svg#c1)

blur()

넣은 이미지에 가우시안 블러를 적용합니다. 'radius'의 값은 표준 편차의 값을 가우스 함수에 정의하거나 화면에 몇 개의 픽셀이 서로 섞여 있는지를 정의하므로 값이 클수록 흐림이 더 많이 발생합니다. 매개 변수가 제공되지 않으면 값 0이 사용됩니다. 매개 변수는 CSS 길이로 지정되지만 백분율 값은 허용되지 않습니다.

filter: blur(5px)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

brightness()

입력 이미지에 선형 승수를 적용하여 이미지를 다소 밝게 표시합니다. 값이 0이면 완전히 검은 색 이미지가 생성됩니다. 100 % 값은 입력을 변경하지 않습니다. 다른 값은 효과의 선형 승수입니다. 100 % 이상의 수치가 허용되어 더 밝은 결과를 제공합니다. 'amount' 매개 변수가 누락되면 값 1이 사용됩니다.

filter: brightness(0.5)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

contrast()

입력의 대비를 조정합니다. 값이 0이면 완전히 검은 색 이미지가 생성됩니다. 100 % 값은 입력을 변경하지 않습니다. 100 %를 넘는 수치 값이 허용되어 대비가 낮은 결과를 제공합니다. 'amount'매개 변수가 누락되면 값 1이 사용됩니다.

filter: contrast(200%)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

drop-shadow()

넣은 이미지에 그림자 효과를 적용합니다. 그림자는 사실상 이미지 아래에 합성 된 특정 색상으로 그려진 입력 이미지의 알파 마스크의 흐릿한 오프셋 버전입니다. 이 함수는 'inset'키워드가 허용되지 않는 것을 제외하고는 (CSS3 배경에 정의 된) <shadow> 유형의 매개 변수를 허용합니다. 이 함수는보다 확립 된 box-shadow 속성과 비슷합니다. 차이점은 필터를 사용하면 일부 브라우저가 성능 향상을 위해 하드웨어 가속을 제공한다는 것입니다. <shadow> 매개 변수의 매개 변수는 다음과 같습니다.

<offset-x> <offset-y> (required)
그림자 오프셋을 설정하는 두 개의 <length> 값입니다. <offset-x>는 수평 거리를 지정합니다. 음수 값은 요소의 왼쪽에 그림자를 배치합니다. <offset-y>는 수직 거리를 지정합니다. 음수 값은 요소 위에 그림자를 배치합니다. 가능한 단위는 <length>를보십시오.
두 값이 모두 0이면 그림자가 요소 뒤에 배치됩니다 (<blur-radius> 및 / 또는 <spread-radius>가 설정된 경우 흐림 효과가 발생할 수 있음).
<blur-radius> (optional)
이것은 세 번째 <length> 값입니다. 이 값이 클수록 흐림이 커지므로 그림자가 더 커지고 가벼워집니다. 음수 값은 허용되지 않습니다. 지정하지 않으면 0이됩니다 (그림자의 가장자리가 날카롭습니다).
<spread-radius> (optional)
이것은 네 번째 <length> 값입니다. 양수 값을 지정하면 그림자가 확장되어 커지고 음수 값을 지정하면 그림자가 축소됩니다. 지정하지 않으면 0이됩니다 (그림자는 요소와 크기가 동일합니다).
참고 : 웹킷 및 다른 브라우저는이 네 번째 길이를 지원하지 않습니다. 추가 된 경우 렌더링되지 않습니다.
<color> (optional)
가능한 키워드 및 표기법에 대한 <color> 값을 참조하십시오. 지정하지 않으면 색상은 브라우저에 따라 다릅니다. Gecko (Firefox), Presto (Opera) 및 Trident (Internet Explorer)에서는 color 속성의 값이 사용됩니다. 반면에 WebKit의 그림자는 투명하므로 <color>가 생략되면 쓸모가 없습니다.
filter: drop-shadow(16px 16px 10px black)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

grayscale()

입력 이미지를 회색 음영으로 변환합니다. '금액'의 값은 전환의 비율을 정의합니다. 100 % 값은 완전히 회색조입니다. 0 % 값은 입력을 변경하지 않습니다. 0 %에서 100 % 사이의 값은 효과의 선형 승수입니다. 'amount'매개 변수가 누락되면 값 0이 사용됩니다.

filter: grayscale(100%)

hue-rotate()

입력 이미지에 색조를 적용합니다. 'angle'값은 입력 샘플을 조정할 색상 서클 주위의 각도 수를 정의합니다. 0deg의 값은 입력을 변경하지 않습니다. 'angle'매개 변수가 누락 된 경우 0deg 값이 사용됩니다. 최대 값은 없지만 360deg를 초과하는 값의 효과가 적용됩니다.

filter: hue-rotate(90deg)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>

invert()

입력 이미지의 샘플을 반전합니다. '각도'의 값은 전환의 비율을 정의합니다. 100 %의 값은 완전히 반전됩니다. 0 % 값은 입력을 변경하지 않습니다. 0 %에서 100 % 사이의 값은 효과의 선형 승수입니다. 'amount'매개 변수가 누락되면 값 0이 사용됩니다.

filter: invert(100%)

opacity()

입력 이미지의 샘플에 투명도를 적용합니다. '금액'의 값은 전환의 비율을 정의합니다. 0 %의 값은 완전히 투명합니다. 100 % 값은 입력을 변경하지 않습니다. 0 %에서 100 % 사이의 값은 효과의 선형 승수입니다. 이는 입력 이미지 샘플을 양만큼 곱하는 것과 같습니다. 'amount'매개 변수가 누락되면 값 1이 사용됩니다. 이 함수는보다 확립 된 opacity 속성과 유사합니다. 차이점은 필터를 사용하면 일부 브라우저가 성능 향상을 위해 하드웨어 가속을 제공한다는 것입니다.

filter: opacity(50%)

saturate()

넣은 이미지를 채웁니다. '각도'의 값은 전환의 비율을 정의합니다. 0%의 값은 완전히 포화되지 않습니다. 100 % 값은 입력을 변경하지 않습니다. 다른 값은 효과의 선형 승수입니다. 과포화 된 결과를 제공하면서 100 % 이상의 양의 값이 허용됩니다. 'amount'매개 변수가 누락되면 값 1이 사용됩니다.

filter: saturate(200%)

sepia()

입력 이미지를 세피아로 변환합니다. '금액'의 값은 전환의 비율을 정의합니다. 100 % 값은 완전히 세피아입니다. 0 % 값은 입력을 변경하지 않습니다. 0 %에서 100 % 사이의 값은 효과의 선형 승수입니다. 'amount'매개 변수가 누락되면 값 0이 사용됩니다.

filter: sepia(100%)

함수 조합

You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.

filter: contrast(175%) brightness(103%)

명세

Specification Status Comment
Filter Effects Module Level 1
The definition of 'filter' in that specification.		 Working Draft Initial definition

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 18.0-webkit[1] 35 (35)[2] No support[3] 15.0-webkit 6.0-webkit
On SVG Elements No support[4] 35 (35) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4-webkit 35 (35)[2] No support 22.0 (Yes)-webkit

6.0 (Yes)-webkit
On SVG Elements No support[4] 35 (35) No support No support No support

[1] Chrome 18, 19에서 saturate() 함수는 십진수 또는 백분율 값 대신 정수 만 사용합니다. 이 버그는 Chrome 20 이상에서 수정되었습니다.

[2] Firefox 34 이전에 Gecko는 filter 속성의 url() 형식 만 구현했습니다. 연쇄가 구현되지 않았으므로 하나의 url()만이 허용되었습니다 (또는 layout.css.filters.enabled pref가 false로 설정된 경우).

filter의 함수 값은 layout.css.filters.enabled pref에 의해 제어되고 사용할 수 있지만 기본적으로 Firefox 34에서는 비활성화되어 있습니다.

[3] Internet Explorer 4.0에서 9.0은 비표준 필터 속성을 구현했습니다. 구문은이 구문과 완전히 다르므로 여기에 설명되어 있지 않습니다.

[4] Blink, 현재 이 기능을 구현하지 않습니다. bug 109224를 참조하십시오.

더 보기

문서 태그 및 공헌자

 이 페이지의 공헌자: chatii2412, AshtonYoon, Sebastianz, hoony
 최종 변경: chatii2412,