필터

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

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

 

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

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

문법

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()> | <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);
}

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

함수 조합

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

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

브라우저 호환성

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

53

18 -webkit- 1

12

12 -webkit-

35

342

49 -webkit-

46 -webkit- 3

 No4

40

15 -webkit-

6 -webkit-
On SVG elements Yes No35 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

53

4.4 -webkit-

53

Yes

Yes -webkit-

35

342

49 -webkit-

46 -webkit- 3

40

22 -webkit-

6 -webkit- 6.0
On SVG elements No No No35 No No No

1. In Chrome 18 to 19, the saturate() function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.

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

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

4. Internet Explorer 4 to 9 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.

더 보기

문서 태그 및 공헌자

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