1. 개발자를 위한 웹 기술
  2. CSS
  3. CSS 참고서
  4. Values
  5. <filter-function>
  6. invert()

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

invert()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016년 9월.

invert() CSS 함수는 주어진 이미지에 색상 샘플들을 반전해줍니다. <filter-function>을 반환 값으로 가집니다.

시도해 보기

filter: invert(0);

filter: invert(0.3);

filter: invert(50%);

filter: invert(70%);

filter: invert(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

구문

css
invert(amount)

매개변수

amount

<number> 또는 <percentage>를 지정한 변환할 양. 100%는 완전하게 반전시켜주며, 값을 0%로 지정하면 입력값이 변경되지 않습니다. 0% 과 100%의 사이의 값은 효과의 비율입니다. 보간의 초기값은 0입니다.

예제

invert()를 위한 정확한 값의 예시들

css
invert(0)     /* 변화 없음 */
invert(.6)    /* 60% 반전 */
invert(100%)  /* 완전히 반전됨 */

명세

Specification
Filter Effects Module Level 1
# funcdef-filter-invert

브라우저 호환성

같이 보기

filter와 backdrop-filter 프로퍼티 값에 사용할 수 있는 다른 <filter-function>들:

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content