backdrop-filter상속 불가애니메이션 허용

사용 가능한 값 타입

• Filter Effect Module Level 2

  none | <filter-value-list>

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

• <filter-value-list>

  filter 속성으로 효과를 지정하기 위해 설정된 값 목록을 나타낸다.

  • Filter Effect Module Level 1

    [ <filter-function> | <url> ]+

    한 개 이상의 관련 함수를 사용하여 적용할 수 있다. 한 개 이상의 함수는 공백으로 구분하여 작성한다.

  Details

  포함된 타입

  • <filter-function>

    이미지의 모습을 변형할 수 있는 그래픽 효과를 지정할 수 있다.

    Details

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

    • blur()

      가우시안 블러(gaussian blur)를 적용하여 이미지를 흐리게 처리한다.

      • Filter Effect Module Level 1

        filter: blur(5px);

        filter 속성의 blur 테스트

    • brightness()

      이미지의 밝기를 조절한다.

      • Filter Effect Module Level 1

        filter: brightness(150%);

        filter 속성의 brightness 테스트

    • contrast()

      이미지의 색상 대비를 조절한다.

      • null, Filter Effect Module Level 1

        filter: contrast(0%);

        filter 속성의 contrast 테스트

    • drop-shadow()

      그림자를 생성한다.

      • Filter Effect Module Level 1

        filter: drop-shadow(10px 20px 5px #CCCCCC);

        filter 속성의 drop-shadow 테스트

    • grayscale()

      이미지를 흑백으로 변환한다.

      • Filter Effect Module Level 1

        filter: grayscale(80%);

        filter 속성의 grayscale 테스트

    • hue-rotate()

      이미지의 전체 색조를 조절한다.

      • Filter Effect Module Level 1

        filter: hue-rotate(240deg);

        filter 속성의 hue-rotate 테스트

    • invert()

      이미지의 색상을 반전한다.

      • Filter Effect Module Level 1

        filter: invert(70%);

        filter 속성의 invert 테스트

    • opacity()

      이미지의 투명도를 조절한다.

      • Filter Effect Module Level 1

        filter: opacity(50%);

        filter 속성의 opacity테스트

    • saturate()

      이미지의 채도를 조절한다.

      • Filter Effect Module Level 1

        filter: saturate(300%);

        filter 속성의 saturate 테스트

    • sepia()

      이미지에 세피아 톤을 적용한다.

      • Filter Effect Module Level 1

        filter: sepia(300%);

        filter 속성의 sepia 테스트

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

    • filter

      요소에게 시각적 효과를 정의한다.

  • <url>

    이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

    • CSS Values and Units Module Level 4

      <url()> | <src()>

    Details

    포함된 타입

    • <src()>

      src() 함수의 매개변수를 나타낸다.

      • CSS Values and Units Module Level 4

        src( <string> <url-modifier>* )

      Details

      포함된 타입

      • <string>

        따옴표로 감싸진 데이터 유형을 표현한다.

        • "this is a 'string'."

        Details

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • font-family

          글꼴을 지정한다.

        • content

          가상 요소로 생성할 콘텐츠를 설정한다.

        • quotes

          인용 부호의 유형을 설정한다.

      • <url-modifier>

        URL의 의미나 해석을 어떻게든 변경하는 타입이다.

    • <url()>

      url() 함수의 매개변수를 나타낸다.

      • CSS Values and Units Module Level 4

        url( <string> <url-modifier>* ) | <url-token>

      Details

      포함된 타입

      • <url-token>

        URL Token Railroad Diagrams

      • <string>

        따옴표로 감싸진 데이터 유형을 표현한다.

        • "this is a 'string'."

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]

      • <url-modifier>

        URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

    • url()

      CSS에서 사용할 외부 리소스를 가져온다.

      • CSS1, CSS Values and Units Module Level 3Post pending

        background-image: url();

        두 개 이상의 배경 이미지를 설정한다.

        
        

        url() 함수의 인수 값으로 SVG Data URL을 이용한 경우에 대한 샘플 코드

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

    • background-image

      선택자를 갖는 요소에 배경 이미지를 설정한다.

    • clip-path

      요소의 클리핑 범위를 설정한다.

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

• none

  어떠한 값도 설정하지 않음을 나타낸다.