MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

이 페이지에 스크립팅 오류가 있습니다. 오류가 사이트 편집자에 의해 처리되는 동안, 아래에 있는 부분 콘텐츠만 볼 수 있습니다.

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

{{CSSRef}}{{SeeCompatTable}}

요약

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.

{{cssinfo}}

문법

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 {{SVGElement ( "filter")}} 요소에 대한 참조는 다음을 사용하십시오 :

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

Formal syntax

{{csssyntax}}

예제

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

.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>

{{EmbedLiveSample('blur_example','100%','236px','')}}

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>

{{EmbedLiveSample('brightness_example','100%','231px','')}}

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>

{{EmbedLiveSample('contrast_example','100%','203px','')}}

drop-shadow()

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

<offset-x> <offset-y> (required)
그림자 오프셋을 설정하는 두 개의 {{cssxref ( "<length>"}}} 값입니다. <offset-x>는 수평 거리를 지정합니다. 음수 값은 요소의 왼쪽에 그림자를 배치합니다. <offset-y>는 수직 거리를 지정합니다. 음수 값은 요소 위에 그림자를 배치합니다. 가능한 단위는 {{cssxref ( "<length>"}}}를보십시오.
두 값이 모두 0이면 그림자가 요소 뒤에 배치됩니다 (<blur-radius> 및 / 또는 <spread-radius>가 설정된 경우 흐림 효과가 발생할 수 있음).
<blur-radius> (optional)
이것은 세 번째 {{cssxref ( "<length>"}}} 값입니다. 이 값이 클수록 흐림이 커지므로 그림자가 더 커지고 가벼워집니다. 음수 값은 허용되지 않습니다. 지정하지 않으면 0이됩니다 (그림자의 가장자리가 날카롭습니다).
<spread-radius> (optional)
이것은 네 번째 {{cssxref ( "<length>"}}} 값입니다. 양수 값을 지정하면 그림자가 확장되어 커지고 음수 값을 지정하면 그림자가 축소됩니다. 지정하지 않으면 0이됩니다 (그림자는 요소와 크기가 동일합니다).
참고 : 웹킷 및 다른 브라우저는이 네 번째 길이를 지원하지 않습니다. 추가 된 경우 렌더링되지 않습니다.
<color> (optional)
가능한 키워드 및 표기법에 대한 {{cssxref ( "<color>"}}} 값을 참조하십시오. 지정하지 않으면 색상은 브라우저에 따라 다릅니다. Gecko (Firefox), Presto (Opera) 및 Trident (Internet Explorer)에서는 {{cssxref ( "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>

{{EmbedLiveSample('shadow_example','100%','300px','')}}

grayscale()

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

filter: grayscale(100%)

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

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>

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

invert()

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

filter: invert(100%)

{{EmbedLiveSample('invert_example','100%','407px','')}}

opacity()

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

filter: opacity(50%)

{{EmbedLiveSample('opacity_example','100%','210px','')}}

saturate()

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

filter: saturate(200%)

{{EmbedLiveSample('saturate_example','100%','332px','')}}

sepia()

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

filter: sepia(100%)

{{EmbedLiveSample('sepia_example','100%','229px','')}}

함수 조합

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%)

{{EmbedLiveSample('combination_example','100%','209px','')}}

명세

Specification Status Comment
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }} {{ Spec2('Filters 1.0') }} Initial definition

브라우저 호환성

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatChrome("18.0")}}{{property_prefix("-webkit")}}[1] {{CompatGeckoDesktop(35)}}[2] {{CompatNo}}[3] {{CompatOpera("15.0")}}{{property_prefix("-webkit")}} {{CompatSafari("6.0")}}{{property_prefix("-webkit")}}
On SVG Elements {{CompatNo}}[4] {{CompatGeckoDesktop(35)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatAndroid("4.4")}}{{property_prefix("-webkit")}} {{CompatGeckoDesktop(35)}}[2] {{CompatNo}} 22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

On SVG Elements {{CompatNo}}[4] {{CompatGeckoDesktop(35)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

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

[2] Firefox 34 이전에 Gecko는 filter 속성의 {{anch ( "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를 참조하십시오.

더 보기

문서 태그 및 공헌자

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