filter

이동:
  1. 구문
  2. 예제
  3. 함수
  4. 함수 조합
  5. 명세
  6. 브라우저 호환성
  7. 같이 보기

이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

filter CSS 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지 렌더링, 배경, 테두리 등의 조정에 쓰입니다.

CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. SVG 필터 요소에 대한 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.

구문

/* SVG 필터 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
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%);

/* 여러 개의 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

함수를 사용하려면 다음 구문을 사용하세요.

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

SVG <filter> 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.

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

보간

보간의 시작과 끝 필터 목록이 같은 길이를 가지고 있으며 <url> 값을 포함하고 있지 않을 때, 각 필터 함수는 자신의 특정한 규칙을 사용해 보간됩니다. 목록의 길이가 서로 다를 땐, 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하는데, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한 쪽의 필터가 none이라면 다른 쪽 필터 목록에서 모두 가져오고, 라쿠나 값을 대입한 후 보간합니다. 이 외의 경우에는 이산 보간을 사용합니다.

형식 구문

none | <filter-function-list>
where 
<filter-function-list> = [ <filter-function> | <url> ]+
where 
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
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> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <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} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <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);
}

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

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

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

함수

filter 속성은 none이나, 아래 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 none을 반환합니다. 따로 명시하지 않았다면, 백분율 값(34% 등)을 받는 함수는 그 백분율의 소수 표기법(0.34 등)도 받을 수 있습니다.

SVG 필터

url()

SVG 필터를 가리키는 IRI를 받습니다. 외부 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%)

함수 조합

여러 개의 함수를 조합할 수도 있습니다. 아래 예시는 이미지의 대비와 밝기를 향상시킵니다.

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

명세

Specification Status Comment
Filter Effects Module Level 1
The definition of 'filter' in that specification.		 Working Draft Initial definition
초기값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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
filter
Experimental
Chrome Full support 53
Full support 53
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes In Chrome 18 to 19, the saturate() function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 35
Full support 35
Partial support 34
Disabled
Disabled From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 46
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support No
Notes
No support No
Notes
Notes Internet Explorer 4 to 9 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.
Opera Full support 40
Full support 40
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9.1
Full support 9.1
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 53
Full support 53
Full support 4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 53Firefox Android Full support 35
Full support 35
Partial support 34
Disabled
Disabled From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 46
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41
Full support 41
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9.3
Full support 9.3
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0
On SVG elementsChrome Full support YesEdge No support NoFirefox Full support 35IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 35Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, chatoo2412, AshtonYoon, Sebastianz, hoony
최종 변경자: alattalatta,