Properties

Properties

Editing
  • account_tree
  • bug_report

mix-blend-mode

요소의 내용이 부모 배경과 혼합되는 방법을 지정한다.

사용 가능한 값 타입

<'mix-blend-mode'>

DEVDIC-Specified Data Types

mix-blend-mode 속성에 사용되는 타입이다.

  • Compositing and Blending Level 2
    <blend-mode> | plus-darker | plus-lighter

포함된 타입

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

  • <blend-mode>

    요소가 겹쳐 있는 경우 각 요소의 색상이 겹쳐서 보여지는 방식을 정의한다.

    • Compositing and Blending Level 2
      normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue |saturation | color | luminosity
    Details

    사용되는 키워드

    • color

      Compositing and Blending Level 2

      겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조와 채도를 가지되 뒤쪽 요소의 명도를 반영하여 혼합하여 표시한다.

    • color-burn

      겹쳐진 두 요소에서 뒤쪽 요소의 색을 반전하고 앞쪽 요소의 색으로 나누어 다시 반전 혼합하여 표시한다.

    • color-dodge

      겹쳐진 두 요소에서 뒤쪽 요소의 색을 기준으로 앞쪽 요소의 밝은 색을 강조하면서 혼합하여 표시한다.

      전체적으로 결과물의 명도가 높아지는 혼합 방식이다.

    • darken

      겹쳐진 두 요소의 각각의 채널에 대해 어두운 색을 강조하며 혼합하여 색상을 표시한다.

    • difference

      겹쳐진 두 요소의 색상 중 더 어두운 색을 밝은 색에서 뺀 방식으로 혼합하여 표시한다.

    • exclusion

      difference와 유사하지만 더 적은 대비를 가진 색으로 혼합하여 표시한다.

    • hard-light

      겹쳐진 두 요소에서 앞쪽 요소의 색이 더 어두우면 multiply, 더 밝을 경우 screen 방식으로  혼합하여 표시한다.

    • hue

      겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조를 가지되 뒤쪽 요소의 채도와 명도를 반영하여 혼합하여 표시한다.

    • lighten

      겹쳐진 두 요소의 각각의 채널에 대해 밝은 색을 강조하며 혼합하여 색상을 표시한다.

    • luminosity

      겹쳐진 두 요소의 색상에서 앞쪽 요소의 명도를 가지되 뒤쪽 요소의 색조와 채도를 반영하여 혼합하여 표시한다.

    • multiply

      겹쳐 있는 두 요소의 색상을 곱한 값으로 표시한다. 결과적으로 어둡게 색이 보여진다.

    • normal

      색상 혼합이 적용되지 않고 상단에 위치한 요소의 색상으로만 표시된다.

    • overlay

      겹쳐진 두 요소중 뒤쪽의 색이 더 어두운 경우에 multiply, 더 밝은 경우에는 screen으로 혼합하여 색상을 표시한다.

      아래쪽 배경이 밝을 때에는 위쪽 배경은 더 밝아지고, 아래쪽 배경이 어두울 때는 위쪽 배경은 더 어두워지는 결과를 만든다.

    • saturation

      겹쳐진 두 요소의 색상에서 앞쪽 요소의 채도를 가지되 뒤쪽 요소의 색조와 명도를 반영하여 혼합하여 표시한다.

    • screen

      겹쳐진 두 요소의 색상을 각각 반전한 후 서로 곱해 나온 색상을 다시 반전하여 색상을 표시한다.

      multiply와 반대 결과로 보이며 더 밝은 혼합으로 처리한다.

    • soft-light

      hard-light 방식과 유사하지만 더 부드러운 혼합 결과를 만든다.

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

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

    • background-blend-mode

      복수의 배경이 설정되어 겹쳐진 경우 혼합 방식을 설정할 수 있다.

사용되는 키워드

  • plus-darker

  • plus-lighter

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈blend-mode〉normal
    Compositing and Blending Level 2

    색상 혼합이 적용되지 않고 상단에 위치한 요소의 색상으로만 표시된다.

  • Compositing and Blending Level 2

    겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조와 채도를 가지되 뒤쪽 요소의 명도를 반영하여 혼합하여 표시한다.

  • 겹쳐진 두 요소에서 뒤쪽 요소의 색을 반전하고 앞쪽 요소의 색으로 나누어 다시 반전 혼합하여 표시한다.

  • 〈blend-mode〉color-dodge

    겹쳐진 두 요소에서 뒤쪽 요소의 색을 기준으로 앞쪽 요소의 밝은 색을 강조하면서 혼합하여 표시한다.

  • 겹쳐진 두 요소의 각각의 채널에 대해 어두운 색을 강조하며 혼합하여 색상을 표시한다.

  • 겹쳐진 두 요소의 색상 중 더 어두운 색을 밝은 색에서 뺀 방식으로 혼합하여 표시한다.

  • difference와 유사하지만 더 적은 대비를 가진 색으로 혼합하여 표시한다.

  • 겹쳐진 두 요소에서 앞쪽 요소의 색이 더 어두우면 multiply, 더 밝을 경우 screen 방식으로  혼합하여 표시한다.

  • 겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조를 가지되 뒤쪽 요소의 채도와 명도를 반영하여 혼합하여 표시한다.

  • 겹쳐진 두 요소의 각각의 채널에 대해 밝은 색을 강조하며 혼합하여 색상을 표시한다.

  • 겹쳐진 두 요소의 색상에서 앞쪽 요소의 명도를 가지되 뒤쪽 요소의 색조와 채도를 반영하여 혼합하여 표시한다.

  • 겹쳐 있는 두 요소의 색상을 곱한 값으로 표시한다. 결과적으로 어둡게 색이 보여진다.

  • 겹쳐진 두 요소중 뒤쪽의 색이 더 어두운 경우에 multiply, 더 밝은 경우에는 screen으로 혼합하여 색상을 표시한다.

  • 겹쳐진 두 요소의 색상에서 앞쪽 요소의 채도를 가지되 뒤쪽 요소의 색조와 명도를 반영하여 혼합하여 표시한다.

  • 겹쳐진 두 요소의 색상을 각각 반전한 후 서로 곱해 나온 색상을 다시 반전하여 색상을 표시한다.

  • hard-light 방식과 유사하지만 더 부드러운 혼합 결과를 만든다.

구문

  • mix-blend-mode: multiply;
    Compositing and Blending Level 2

테스트 도구

요소에 대한 혼합 모드를 지정한다.

버전 명세

Modules
Module NameStatusSummary
Compositing and Blending Level 2편집자 초안

Last review date: 2022-12-9

지원 웹브라우저