mask-image상속 불가애니메이션 허용

사용 가능한 값 타입

• CSS Masking Module Level 1

  <mask-reference>#

포함된 타입

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

• <mask-reference>

  마스크 레이어로 사용되는 이미지 설정값을 나타낸다.

  • CSS Masking Module Level 1

    none | <image> | <mask-source>

  Details

  포함된 타입

  • <image>

    2차원 이미지를 나타낸다.

    • CSS Images Module Level 4

      <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

      <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

      현재 image()는 지원하지 않는다.

    Details

    포함된 타입

    • <gradient>

      두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

      • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

        선형 그라데이션

        Example
      • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

        원형 그라데이션

        Example
      Details

      관련 함수

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

      • conic-gradient()

        중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.

        • CSS Color Module Level 4

          background: conic-gradient(from 0deg at center center, #FF0000, #FFFF00);

          Example

      • linear-gradient()

        선형 그라디언트를 생성한다.

        • CSS Images Module Level 4

          linear-gradient(<angle>, <color-stop-list>)

          Example
        • CSS Images Module Level 4

          linear-gradient(<side-or-corner>, <color-stop-list>)

          Example
        • CSS Images Module Level 4

          linear-gradient(<color-stop-list>#);
          linear-gradient(<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#);

          Example

      • radial-gradient()

        원형 그라디언트를 생성한다.

        • CSS Images Module Level 4

          radial-gradient(circle 100px at 50% 20%, blue, pink, yellow)

          Example

      • repeating-linear-gradient()

        설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.

      • repeating-radial-gradient()

        설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.

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

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

      • background

        요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

      • background-image

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

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

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

    관련 함수

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

    • cross-fade()

      이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade() 함수로 수행된다.

    • element()

      작성자가 문서의 요소를 이미지로 사용할 수 있다. 참조된 요소의 모양이 변경되면 이미지도 변경된다.

      • CSS Images Module Level 4

        background-image: element(#original);

        Example

    • image-set()

      사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.

      • CSS Images Module Level 4

        background-image: image-set( url("http://sample.devdic.com/parallax/images/bg_2880x1800.jpg") 1x,	url("http://sample.devdic.com/parallax/images/bg_3200x2000.jpg") 2x);

        Example

  • <make-source>

    마스크 요소(예: url(commonmasks.svg#mask)) 또는 CSS 이미지에 대한 URL을 나타낸다.

    • CSS Masking Module Level 1

      <url>

    Details

    포함된 타입

    • <url>

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

      • CSS Values and Units Module Level 4

        <url()> | <src()>

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

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

  공통적으로 사용되는 값

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

  • none

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