합성 및 블렌딩 레벨 1

1. 소개

이 하위 섹션은 규범적이지 않습니다.
이 문서의 첫 번째 부분은 CSS에서 합성을 제어하는 데 사용되는 속성들을 설명합니다. 두 번째 부분에서는 Porter Duff 합성과 블렌딩 알고리즘을 설명합니다.

2. 이 문서 읽기

별도의 명시가 없는 한, 이 문서의 각 섹션은 규범적입니다.

2.1. 모듈 상호작용

이 명세서는 해당 속성이 적용된 요소의 시각적 렌더링에 영향을 주는 CSS 속성들을 정의합니다. 이러한 효과들은 CSS 시각적 포맷팅 모델 [CSS21]에 따라 요소가 크기와 위치가 결정된 후에 적용됩니다. 이러한 속성의 일부 값은 컨테이닝 블록 및/또는 스태킹 컨텍스트를 생성합니다.

background-blend-mode 속성은 CSS Backgrounds and Borders 모듈 [CSS3BG]에서 정의된 속성을 기반으로 합니다.

이 명세서는 또한 [SVG11] 14.2 단순 알파 합성 및 단순 알파 합성 [CSS-COLOR-4]의 규칙을 확장합니다.

이 모듈은 globalCompositeOperation 속성도 확장합니다.

2.2. 값

이 명세서는 CSS 속성 정의 규약 [CSS21]을 따릅니다. 이 명세서에서 정의되지 않은 값 타입은 CSS Level 2 Revision 1 [CSS21]에서 정의됩니다. 다른 CSS 모듈은 이러한 값 타입의 정의를 확장할 수 있습니다. 예를 들어 [CSS-COLOR-4]는 이 모듈과 결합될 때 <color> 값 타입의 정의를 확장합니다.

각 속성 정의에 명시된 속성별 값 외에도, 이 명세서에서 정의된 모든 속성은 inherit 키워드를 속성 값으로 허용합니다. 가독성을 위해 별도로 반복하지 않았습니다.

3. CSS에서 블렌딩 지정

3.1. 그래픽 연산 순서

합성 모델은 SVG 합성 모델 [SVG11]을 따라야 합니다: 먼저 필터 효과가 적용되고, 그 다음 클리핑, 마스킹, 블렌딩, 합성이 적용됩니다.

3.2. HTML에 특정한 동작

CSS에서 스태킹 컨텍스트를 생성하는 모든 것은 ‘격리된’ 그룹으로 간주되어야 합니다. HTML 요소 자체는 그룹을 생성해서는 안 됩니다.

블렌딩이 적용된 요소는 해당 요소가 속한 스태킹 컨텍스트 [CSS21]의 모든 하위 콘텐츠와 블렌딩되어야 합니다.

HTML 문서의 루트 요소는 문서 요소입니다.

3.3. SVG에 특정한 동작

기본적으로 모든 요소는 비격리 그룹을 생성해야 합니다.

하지만 SVG에서 특정 연산은 격리된 그룹을 생성합니다. 다음 기능 중 하나가 사용되는 경우, 해당 그룹은 격리되어야 합니다:

opacity
filters
3D transforms (2D 변환은 격리를 유발하면 안 됨)
blending
masking

SVG의 루트 요소는 SVG 요소입니다.

3.4. CSS 속성

3.4.1. mix-blend-mode 속성

블렌드 모드는 색상을 배경과 혼합하는 데 사용되는 공식을 정의합니다. 이 동작은 블렌딩에서 더 자세히 설명됩니다.

이름:	mix-blend-mode
값:	<blend-mode>
초기값:	normal
적용 대상:	모든 요소. SVG에서는 컨테이너 요소, 그래픽 요소 및 그래픽 참조 요소에 적용됩니다. [SVG11]
상속됨:	아니오
백분율:	해당 없음
계산된 값:	명시된 대로
정규 순서:	문법에 따라
애니메이션 타입:	불연속
미디어:	시각적

<blend-mode> 속성의 문법은 다음과 같습니다:

<blend-mode> =
  normal |
  darken | multiply | color-burn |
  lighten | screen | color-dodge |
  overlay | soft-light | hard-light |
  difference | exclusion |
  hue | saturation | color | luminosity

normal이 아닌 블렌드 모드를 요소에 적용하면 새로운 스태킹 컨텍스트 [CSS21]가 생성되어야 합니다. 이 그룹은 해당 요소를 포함하는 스태킹 컨텍스트와 블렌딩 및 합성되어야 합니다.

테스트

다음 샘플 마크업이 주어졌을 때:

<body>
  <img src="ducky.png"/>
</body>

그리고 다음 스타일 규칙이 적용된 경우:

body { background-color: lime; }

... 다음과 같은 결과가 생성됩니다:

부분적으로 투명한 이미지를 라임색 배경 위에 표시

스타일 규칙을 블렌딩을 포함하도록 변경하면:

body { background-color: lime; }
img { mix-blend-mode: multiply; }

... 출력 결과는 <body> 요소의 라임색 배경과 이미지가 블렌딩됩니다.

투명한 이미지가 라임색 배경과 블렌딩됨.

다음 svg 코드가 주어졌을 때:

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lime"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

그리고 다음 스타일 규칙이 적용된 경우:

circle { mix-blend-mode: screen; }

... 출력 결과는 3개의 원이 블렌딩됩니다. 각 원은 아래에서 위로 렌더링됩니다. 요소가 겹치는 부분에서 블렌드 모드가 색상 변화를 만듭니다.

screen 블렌드 모드로 블렌딩되는 3개의 원 예시

다음 스타일 시트와 문서 조각에서:

body { background-color: lime; }
div { background-color: red; width: 200px; opacity: .95}
img { mix-blend-mode: difference; }

<body>
  <div>
     <img src="ducky.png"/>
  </div>
</body>

... <div> 요소의 opacity가 스태킹 컨텍스트를 생성합니다. 이로 인해 새 그룹이 생성되어 이미지가 <body>의 색상과 블렌딩되지 않습니다.

스태킹 컨텍스트 내에서 블렌딩 예시.

이미지가 라임색 배경과 블렌딩되지 않는 점을 주목하세요.

다음 샘플 마크업이 주어졌을 때:

<body>
   <div>
     <p>overlay 텍스트에 블렌딩 적용</p>
   </div>
</body>

그리고 다음 스타일 규칙이 적용된 경우:

div { background-image: url('texture.png'); }
@font-face {
  font-family: "Mythos Std";
  src: url("http://myfontvendor.com/mythos.otf");
}
p {
  mix-blend-mode: overlay;
  font-family: "Mythos Std"
}

이미지 위에 블렌드 overlay가 적용된 텍스트.

3.4.2. isolation 속성

SVG에서는 이 속성이 요소가 격리되는지 여부를 정의합니다.
CSS에서는 isolation을 isolate로 설정하면 해당 요소가 스태킹 컨텍스트가 됩니다.

기본적으로 요소는 auto 키워드를 사용하며, 이는 격리되지 않음을 의미합니다. 하지만 스태킹 컨텍스트를 생성하는 연산 [CSS21]은 그룹을 격리시켜야 합니다. 이러한 연산은 'HTML에 특정한 동작'과 'SVG에 특정한 동작'에서 설명됩니다.

이름:	isolation
값:	<isolation-mode>
초기값:	auto
적용 대상:	모든 요소. SVG에서는 컨테이너 요소, 그래픽 요소 및 그래픽 참조 요소에 적용됩니다. [SVG11]
상속됨:	아니오
백분율:	해당 없음
계산된 값:	명시된 대로
정규 순서:	문법에 따라
애니메이션 타입:	불연속
미디어:	시각적

<isolation-mode> 속성의 문법은 다음과 같습니다:

<isolation-mode> = auto | isolate

테스트

inheritance.html (실시간 테스트) (소스)
isolation-no-interpolation.html (실시간 테스트) (소스)
blend-isolation.html (시각적 테스트) (소스)
isolation-computed.html (실시간 테스트) (소스)
isolation-invalid.html (실시간 테스트) (소스)
isolation-valid.html (실시간 테스트) (소스)

CSS에서는 배경 이미지나 img의 콘텐츠가 항상 격리된 그룹으로 렌더링되어야 합니다.
예를 들어, img 태그로 SVG 파일을 링크하면 해당 SVG의 아트워크가 콘텐츠의 배경과 블렌딩되지 않습니다.

SVG에서는 mask가 항상 격리된 그룹을 생성합니다.

3.4.3. background-blend-mode 속성

각 배경 레이어의 블렌딩 모드를 정의합니다.

각 배경 레이어는 해당 요소의 아래에 있는 배경 레이어와 요소의 배경색과 블렌딩되어야 합니다. 배경 레이어는 요소 뒤에 있는 콘텐츠와 블렌딩되어서는 안 되며, 대신 격리된 그룹에 렌더링된 것처럼 동작해야 합니다.

background-blend-mode 속성의 설명은 다음과 같습니다:

이름:	background-blend-mode
값:	<blend-mode>#
초기값:	normal
적용 대상:	모든 HTML 요소
상속됨:	아니오
백분율:	해당 없음
계산된 값:	명시된 대로
정규 순서:	문법에 따라
애니메이션 타입:	불연속
미디어:	시각적

테스트

background-blend-mode 목록은 background-image [CSS3BG]와 동일한 순서로 적용되어야 합니다. 즉, 목록의 첫 번째 값이 가장 위의 레이어에 적용됩니다. 속성에 레이어 개수만큼 콤마로 구분된 값이 부족한 경우, UA는 값 목록을 반복하여 충분한 값을 채워 사용값을 계산해야 합니다.

background [CSS3BG] 축약형이 사용되면, 해당 요소의 background-blend-mode 속성은 초기값으로 리셋되어야 합니다.

다음 샘플 마크업이 주어졌을 때:

<body>
   <div></div>
</body>

그리고 다음 스타일 규칙이 적용된 경우:

body { background-color: lime; }
div {
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
  background-blend-mode: difference, normal;
}

2개의 배경 이미지 블렌딩 예시.

그라데이션이 body의 색상과 블렌딩되지 않고, 원래 색상을 유지함을 주목하세요.

4. Canvas 2D에서 합성과 블렌딩 지정

canvas 2d 컨텍스트는 현재 합성과 블렌딩 연산자를 설정하는 데 사용되는 globalCompositeOperation 속성을 정의합니다.

이 속성은 다음 값을 사용합니다:

‘globalCompositeOperation’

값:	<blend-mode> \| <composite-mode>
초기값:	source-over

<composite-mode> 속성의 문법은 다음과 같습니다:

<composite-mode> = clear | copy | source-over | destination-over | source-in |    
destination-in | source-out | destination-out | source-atop |    
destination-atop | xor | lighter

테스트

canvas-composite-modes.html (실시간 테스트) (소스)

5. 합성 소개

합성이란 그래픽 요소와 그 배경을 결합하는 작업을 의미합니다.

이 명세서에서 설명하는 모델에서는 전체 합성 작업에 두 단계가 있습니다 - Porter-Duff 합성과 블렌딩입니다. 블렌딩 단계에서는 그래픽 요소와 배경의 색상이 어떻게 상호작용하는지가 결정됩니다.

일반적으로 블렌딩 단계가 먼저 수행되고, 그 다음에 Porter-Duff 합성 단계가 이어집니다. 블렌딩 단계에서는 요소와 배경의 색상을 혼합하여 최종 색상을 계산합니다. 그래픽 요소의 색상은 이 혼합 색상으로 대체됩니다. 그 후 그래픽 요소는 지정된 합성 연산자를 사용하여 배경과 합성됩니다.

참고: 도형은 그 수학적 정의로 도형의 형태가 결정됩니다. 특정 점이 도형 내부에 있거나 없을 수 있으며, 중간 단계는 없습니다.

참고: 불투명도는 알파 값으로 표현되며, 각 점의 색상 값과 함께 저장됩니다. 알파 값은 0에서 1 사이의 값을 가지며, 0은 해당 픽셀이 완전히 투명함을, 1은 완전히 불투명함을 의미합니다. 값이 0이면 해당 픽셀에는 아무런 기하학적 색상 기여가 없으므로 투명합니다. 값이 1이면 픽셀이 완전히 겹쳐져 기하학적으로 해당 픽셀을 완전히 덮습니다.

5.1. 단순 알파 합성

단순 알파 합성 공식은 다음과 같습니다.

co = Cs x αs + Cb x αb x (1 - αs)

여기서

co: 합성 후의 프리멀티플라이드(사전 곱셈된) 픽셀 값
Cs: 합성되는 소스 그래픽 요소의 색상 값
αs: 합성되는 소스 그래픽 요소의 알파 값
Cb: 배경의 색상 값
αb: 배경의 알파 값

참고: 모든 값은 0에서 1 사이입니다.

합성 후의 픽셀 값(co)은 소스 그래픽 요소 [Cs x αs]와 배경 [Cb x αb x (1 - αs)]의 기여도를 더해서 계산합니다. 그래픽 요소와 배경 모두, 색상 값에 알파를 곱해 색상이 얼마나 기여하는지 결정합니다. 알파 값이 0이면 색상이 기여하지 않고, 알파 값이 부분적으로 있으면 일부 색상이 기여합니다. 배경의 기여도는 그래픽 요소의 불투명도에 따라 더 감소합니다. 개념적으로 배경의 (1 - αs) 만큼이 그래픽 요소를 통해 보여지며, 즉 그래픽 요소가 완전히 불투명(αs=1)하면 배경은 전혀 보이지 않습니다.

위의 단순 알파 합성 공식은 배경색과 그래픽 요소 색상의 가중 평균 결과 색상을 제공합니다. 가중치는 배경과 그래픽 요소의 알파에 의해 결정됩니다. 합성의 결과 알파 값은 합성된 요소 각각의 기여 알파의 합입니다. 합성의 결과 알파 공식은 다음과 같습니다.

αo = αs + αb x (1 - αs)

여기서

αo: 합성 결과의 알파 값
αs: 합성되는 그래픽 요소의 알파 값
αb: 배경의 알파 값

종종, 색상과 불투명도를 프리멀티플라이드 값으로 저장하는 것이 더 효율적일 수 있습니다. 프리멀티플라이드 값은 다음과 같이 계산됩니다.

cs = Cs x αs

여기서

cs: 프리멀티플라이드 값
Cs: 색상 값
αs: 알파 값

따라서 프리멀티플라이드 값을 사용한 단순 알파 합성 공식은 다음과 같이 됩니다.

co = cs + cb x (1 - αs)

프리멀티플라이드 값에서 색상 성분을 추출하려면, 공식은 다음과 같이 반전됩니다.

Co = co / αo

5.1.1. 단순 알파 합성 예시

가장 기본적인 경우를 설명합니다. 단일 도형에 단색(α = 1)으로 채워져 있습니다. 도형은 빈 배경과 합성됩니다. 빈 배경은 결과 합성에 영향을 주지 않습니다.

Cs = RGB(1,0,0)
αs = 1
Cb = RGB(0,0,0)
αb = 0

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(1,0,0) x 1 + RGB(0,0,0) x 0 x (1 - 1)
co = RGB(1,0,0) x 1
co = RGB(1,0,0)

더 복잡한 예제입니다. 투명도는 없지만 두 도형이 겹칩니다.

교차 영역에서 합성 공식을 적용하면 다음과 같습니다.

Cs = RGB(0,0,1)
αs = 1
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x (1 - 1)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x 0
co = RGB(0,0,1) x 1
co = RGB(0,0,1)

합성 결과의 알파 계산

αo = αs + αb x (1 - αs)
αo = 1 + 1 x (1 - 1)
αo = 1

합성 결과의 색상 성분 계산

Co = co / αo
Co = RGB(0, 0, 1) / 1
Co = RGB(0, 0, 1)

도형에 투명도가 있고, 배경은 완전히 불투명한 예시입니다.

교차 영역에서 합성 공식을 적용하면 다음과 같습니다.

Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 1 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5
co = RGB(0.5,0,0.5)

합성 결과의 알파 계산

αo = αs + αb x (1 - αs)
αo = 0.5 + 1 x (1 - 0.5)
αo = 1

합성 결과의 색상 성분 계산

Co = co / αo
Co = RGB(0.5, 0, 0.5) / 1
Co = RGB(0.5, 0, 0.5)

그림 4는 도형과 배경 모두 투명한 예시입니다.

교차 영역에서 합성 공식을 적용하면 다음과 같습니다.

Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 0.5

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.25
co = RGB(0.25, 0, 0.5)

합성 결과의 알파 계산

αo = αs + αb x (1 - αs)
αo = 0.5 + 0.5 x (1 - 0.5)
αo = 0.75

합성 결과의 색상 성분 계산

Co = co / αo
Co = RGB(0.25, 0, 0.5) / 0.75
Co = RGB(0.33, 0, 0.66)

6. 합성과 블렌딩의 일반 공식

합성과 블렌딩의 일반 공식은 합성 연산자와 블렌딩 함수를 선택할 수 있게 두 단계로 구성됩니다. 이 함수들에 사용되는 용어들은 다음 섹션에서 자세히 설명됩니다.

블렌드 적용

Cs = (1 - αb) x Cs + αb x B(Cb, Cs)

합성

Co = αs x Fa x Cs + αb x Fb x Cb

설명:

Cs: 소스 색상
Cb: 배경 색상
αs: 소스 알파
αb: 배경 알파
B(Cb, Cs): 혼합 함수
Fa: 사용 중인 Porter Duff 연산자가 정의함
Fb: 사용 중인 Porter Duff 연산자가 정의함

7. 배경 계산

배경은 해당 요소 뒤에 있는 콘텐츠이며, 요소가 합성되는 대상입니다. 즉, 배경은 이전 모든 요소들을 합성한 결과입니다.

7.1. 배경 계산 예시

이 예제에는 2개의 단순 도형이 있습니다. 파란색 도형의 배경은 빨간색 도형의 오른쪽 아래 모서리를 포함합니다. 점선은 파란색 도형을 합성할 때 검사되는 영역을 보여줍니다.

배경에 있는 도형에 알파 값이 있습니다. 배경 도형의 알파 값은 배경이 계산될 때 보존됩니다.

8. 합성 그룹

합성 그룹은 배경과의 합성 상호작용을 더 세밀하게 제어할 수 있습니다. 그룹은 합성 효과가 그룹 내에서 장면에 이미 존재하는 콘텐츠(배경)와 어떻게 상호작용할지 지정하는 데 사용할 수 있습니다.

합성 그룹은 임의의 개수의 요소로 구성될 수 있으며, 다른 합성 그룹을 포함할 수 있습니다.

합성 그룹의 기본 속성은 그룹이 없을 때와 시각적으로 차이가 없도록 해야 합니다. 그룹 불변성을 참조하세요.

합성 그룹은 그룹의 요소들을 처음 배경에 합성하여 렌더링됩니다. 그 결과는 색상과 알파 정보를 가진 단일 요소가 됩니다. 이 요소가 그룹 배경에 다시 합성됩니다. 그룹 배경이 최종 합성에 한 번만 기여하도록 해야 합니다.

초기 배경: 초기 배경은 그룹의 첫 번째 요소를 합성할 때 사용되는 배경입니다. 비격리 그룹에서는 그룹 배경과 같으며, 격리된 그룹에서는 완전히 투명한 배경입니다.
그룹 배경: 그룹 배경은 그룹의 첫 번째 요소를 제외한 모든 요소들을 합성한 결과입니다.

8.1. 그룹 불변성

단순 알파 합성의 중요한 속성 중 하나는 그룹 불변성입니다. 이 동작은 이 명세서에서 설명하는 더 복잡한 모델에서도 유지됩니다. 기본 속성으로 그룹을 추가하거나 제거해도 시각적인 차이가 없어야 합니다.

so: A + B + C = A + (B + C) = (A + B) + C

그룹에 isolate, normal이 아닌 블렌딩 모드, source-over가 아닌 Porter Duff 합성 연산자를 추가하면 그룹이 더 이상 불변이 아닐 수 있습니다.

8.2. 격리된 그룹

격리된 그룹에서는 초기 배경이 검정색이며 완전히 투명해야 합니다.

이 경우, 초기 배경이 그룹 배경과 다릅니다. 그룹 배경과의 상호작용은 그룹의 계산된 색상, 도형, 알파가 그룹 배경과 합성될 때만 일어나야 합니다.

'격리된 그룹과 Porter Duff 모드'에서 합성 시 격리된 그룹의 효과에 대해 설명합니다. '그룹 격리의 블렌딩 효과'에서 블렌딩 시 격리된 그룹의 효과에 대해 설명합니다.

8.3. 루트 요소 그룹

루트 요소의 격리된 그룹이 루트 요소 그룹입니다. 다른 모든 요소와 그룹은 이 그룹에 합성됩니다. 루트 요소의 배경(지정된 경우)은 루트 요소 그룹에 그려지고, 필터, 클립 패스, 마스크, 불투명도가 적용된 후 루트 그룹에 합성됩니다(있는 경우).

테스트

8.4. 루트 그룹

루트 그룹은 전체 캔버스를 포함하며 웹 페이지의 루트 요소 그룹을 포함하거나 그 아래에 위치합니다.

브라우저는 최종 합성 시 종종 무한 흰색, 100% 불투명 루트 그룹을 사용하지만 반드시 그래야 하는 것은 아닙니다.

9. 고급 합성 기능

단순 알파 합성은 source-over Porter Duff 합성 연산자를 사용합니다.

Porter Duff 합성은 픽셀 내에서 두 도형(소스와 대상)이 최종 픽셀 색상에 기여할 수 있다는 모델을 기반으로 합니다. 픽셀은 4개의 서브 픽셀 영역으로 나뉘고, 각 영역은 소스와 대상의 가능한 조합을 나타냅니다. [PORTERDUFF]

네 가지 영역은 다음과 같습니다:

소스만: 오직 소스만 픽셀 색상에 기여하는 영역
대상만: 오직 대상만 픽셀 색상에 기여하는 영역
둘 다: 소스와 대상 – 두 도형 모두 픽셀 색상을 결정하는 데 기여할 수 있는 영역
없음: 소스도 대상도 없음 – 둘 다 최종 픽셀 색상에 기여하지 않는 영역

참고: 대상은 배경(backdrop)과 같은 의미입니다. 이 섹션에서는 Porter Duff 합성에서 표준 용어인 대상(destination)을 사용합니다. 또한, 합성 연산자 이름에 destination이 사용됩니다.

porter duff에 의해 영향을 받는 영역 개요

각 영역의 최종 픽셀 색상에 대한 기여도는 해당 픽셀의 도형 커버리지와 사용 중인 연산자에 의해 정의됩니다. 커버리지는 알파로 지정됩니다. 알파 값이 1이면 완전 커버리지, 0이면 커버리지 없음입니다. 즉, 서브 픽셀 내 각 영역의 면적은 픽셀에 기여하는 각 도형의 커버리지에 따라 달라집니다. 각 영역의 면적은 다음 공식으로 계산할 수 있습니다:

둘 다	αs x αb
소스만	αs x (1 – αb)
대상만	αb x (1 – αs)
없음	(1 – αs) x (1 – αb)

위 그림은 소스와 대상 모두 커버리지가 0.5인 경우를 나타냅니다.

둘 다 = 0.5 x 0.5 = 0.25
소스만 = 0.5 (1 – 0.5) = 0.25
대상만 = 0.5(1 – 0.5) = 0.25
없음 = (1 – 0.5)(1 – 0.5) = 0.25

따라서, 이 예시에서 각 영역의 커버리지는 0.25입니다.

9.1. Porter Duff 합성 연산자

Lucasfilm에서 근무한 Thomas Porter와 Tom Duff의 유명 논문에서는 합성의 대수와 12개의 "Porter Duff" 연산자를 정의했습니다. 이 연산자들은 알파 또는 픽셀 커버리지 채널/값을 가진 그래픽 객체가 겹칠 때 생성되는 네 개의 서브 픽셀 영역을 혼합하는 결과를 제어합니다. 연산자들은 네 영역의 모든 실질적 조합을 사용합니다.

모든 소스/대상 조합을 만족하는 12가지 기본 Porter Duff 연산자가 있습니다.

각 연산자의 기하학적 표현을 보면 각 도형의 기여도가 출력 커버리지의 분수로 표현됨을 알 수 있습니다. 예를 들어, source over에서는 소스의 기여도는 전체(1)이고 대상의 기여도는 남은 부분(1 – αs)입니다. 이는 소스와 대상의 커버리지에 의해 조정되어 최종 픽셀 커버리지의 공식이 됩니다:

αo = αs x 1 + αb x (1 – αs)

분수 항 Fa(이 예에서는 1)와 Fb(이 예에서는 1 – αs)는 각각의 연산자에 대해 정의되며, 최종 픽셀 값에 기여할 수 있는 도형의 비율을 지정합니다. 커버리지에 대한 일반 공식은 다음과 같습니다:

αs x Fa + αb x Fb

그리고 색상을 포함하면 Porter Duff의 일반식은 다음과 같습니다.

co = αs x Fa x Cs + αb x Fb x Cb

여기서:

co는 출력 알파와 곱해진 출력 색상 [0 <= co <= 1]
αs는 소스의 커버리지, Fa는 연산자로 정의되며 소스 포함을 제어, Cs는 소스의 색상(알파와 곱해지지 않음)
αb는 대상의 커버리지, Fb는 연산자로 정의되며 대상 포함을 제어, Cb는 대상의 색상(알파와 곱해지지 않음)

9.1.1. Clear

어떤 영역도 활성화되지 않습니다.

Fa = 0; Fb = 0
co = 0
αo = 0

9.1.2. Copy

오직 소스만 존재합니다.

Fa = 1; Fb = 0
co = αs x Cs
αo = αs

9.1.3. Destination

오직 대상만 존재합니다.

Fa = 0; Fb = 1
co = αb x Cb
αo = αb

9.1.4. Source Over

소스가 대상 위에 배치됩니다.

Fa = 1; Fb = 1 – αs
co = αs x Cs + αb x Cb x (1 – αs)
αo = αs + αb x (1 – αs)

9.1.5. Destination Over

대상이 소스 위에 배치됩니다.

Fa = 1 – αb; Fb = 1
co = αs x Cs x (1 – αb) + αb x Cb
αo = αs x (1 – αb) + αb

9.1.6. Source In

대상과 겹치는 소스가 대상을 대체합니다.

Fa = αb; Fb = 0
co = αs x Cs x αb
αo = αs x αb

9.1.7. Destination In

소스와 겹치는 대상이 소스를 대체합니다.

Fa = 0; Fb = αs
co = αb x Cb x αs
αo = αb x αs

9.1.8. Source Out

대상 외부에 놓인 소스가 배치됩니다.

Fa = 1 – αb; Fb = 0
co = αs x Cs x (1 – αb)
αo = αs x (1 – αb)

9.1.9. Destination Out

소스 외부에 놓인 대상이 배치됩니다.

Fa = 0; Fb = 1 – αs
co = αb x Cb x (1 – αs)
αo = αb x (1 – αs)

9.1.10. Source Atop

대상과 겹치는 소스가 대상을 대체하고, 대상은 다른 곳에 배치됩니다.

Fa = αb; Fb = 1 – αs
co = αs x Cs x αb + αb x Cb x (1 – αs)
αo = αs x αb + αb x (1 – αs)

9.1.11. Destination Atop

소스와 겹치는 대상이 소스를 대체하고, 소스는 다른 곳에 배치됩니다.

Fa = 1 - αb; Fb = αs
co = αs x Cs x (1 - αb) + αb x Cb x αs
αo = αs x (1 - αb) + αb x αs

9.1.12. XOR

소스와 대상의 겹치지 않는 영역이 결합됩니다.

Fa = 1 - αb; Fb = 1 – αs
co = αs x Cs x (1 - αb) + αb x Cb x (1 – αs)
αo = αs x (1 - αb) + αb x (1 – αs)

9.1.13. Lighter

소스 이미지와 대상 이미지를 합산하여 표시합니다. Porter Duff 논문에서는 plus 연산자로 정의됩니다 [PORTERDUFF].

Fa = 1; Fb = 1
co = αs x Cs + αb x Cb;
αo = αs + αb

9.2. Porter Duff 모드에서 그룹 합성 동작

격리된 그룹 내의 요소들을 합성할 때, 요소들은 투명한 검정색 초기 배경 위에 합성됩니다. 그룹의 맨 아래 요소가 Porter Duff 합성 연산자 중 배경에 의존적인 destination, source-in, destination-in, destination-out 또는 source-atop을 사용하면, 합성 결과가 비어있게 됩니다. 그룹 내 후속 요소들은 첫 번째 합성 결과와 합성됩니다.

10. 블렌딩

블렌딩은 소스 요소와 배경이 겹치는 부분에서 색상 혼합을 계산하는 합성의 한 측면입니다.
개념적으로, 소스 요소 내의 색상이 배경과 해당 위치에서 블렌딩됩니다. 블렌딩 후에는 수정된 소스 요소가 배경과 합성됩니다. 실무적으로는 이 과정이 일반적으로 한 번에 이루어집니다.
블렌딩 계산에서는 프리멀티플라이드 색상 값을 사용하면 안 됩니다.

"혼합" 공식은 다음과 같이 정의됩니다:

Cm = B(Cb, Cs)

여기서:

Cm: 블렌딩 후의 결과 색상
B: 블렌딩을 수행하는 공식
Cb: 배경 색상
Cs: 소스 색상

혼합 공식의 결과는 색상 범위의 최소 및 최대값으로 클램프되어야 합니다.

혼합 함수의 결과는 배경의 알파에 의해 조절됩니다. 완전히 불투명한 배경은 혼합 함수가 완전히 적용되도록 합니다. 투명한 배경은 최종 결과가 소스 색상과 혼합 색상의 가중 평균이 되며, 가중치는 배경 알파에 의해 결정됩니다. 새로운 색상의 값은 다음과 같이 됩니다:

Cr = (1 - αb) x Cs + αb x B(Cb, Cs)

여기서:

Cr: 결과 색상
B: 블렌딩을 수행하는 공식
Cs: 소스 색상
Cb: 배경 색상
αb: 배경 알파

이 예제에서는 블렌딩 모드가 적용된 빨간색 사각형이 다양한 불투명도를 가진 녹색 사각형 위에 배치됩니다.

위쪽 사각형이 배경의 불투명도가 작아질수록 더 붉은 색으로 변화하는 점에 주목하세요.

참고: 다음 공식은 소스와 배경이 교차하는 영역에서 색상 값을 제공하고, 지정된 Porter Duff 합성 공식으로 합성합니다. 단순 알파 블렌딩의 경우 공식은 다음과 같습니다:

단순 알파 합성:
    co = cs + cb x (1 - αs)
비프리멀티플라이드로 작성:
    αo x Co = αs x Cs + (1 - αs) x αb x Cb
이제 블렌딩 결과를 Cs에 대입:
    αo x Co = αs x ((1 - αb) x Cs + αb x B(Cb, Cs)) + (1 - αs) x αb x Cb
            = αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

10.1. 분리형 블렌드 모드

블렌드 모드는 결과 색상의 각 성분이 해당하는 배경 및 소스 색상 성분에 의해 완전히 결정되면 분리형이라고 합니다. 즉, 혼합 공식이 각 성분 집합에 별도로 적용됩니다.

다음 블렌드 모드 각각은 블렌딩 함수 B(Cb, Cs)를 각 색상 성분에 적용합니다. 단순화를 위해 이 장의 모든 예제는 source-over 합성을 사용합니다.

10.1.1. normal 블렌드 모드

이것이 기본 속성으로, 블렌딩이 적용되지 않음을 지정합니다. 블렌딩 공식은 단순히 소스 색상을 선택합니다.

B(Cb, Cs) = Cs

10.1.2. multiply 블렌드 모드

소스 색상이 대상 색상과 곱해져 대상 색상을 대체합니다.

결과 색상은 항상 소스 또는 대상 색상보다 어둡습니다. 어떤 색상과 검정색을 곱하면 항상 검정색이 되고, 어떤 색상과 흰색을 곱하면 원래 색상이 유지됩니다.

B(Cb, Cs) = Cb x Cs

10.1.3. screen 블렌드 모드

배경과 소스 색상의 보수를 곱한 다음 결과의 보수를 취합니다.

결과 색상은 항상 두 색상 중 더 밝은 쪽과 같거나 더 밝습니다. 흰색으로 스크린하면 항상 흰색, 검정색으로 스크린하면 원래 색상이 유지됩니다. 이 효과는 여러 사진 슬라이드를 동시에 한 화면에 투사하는 것과 유사합니다.

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
          = Cb + Cs -(Cb x Cs)

10.1.4. overlay 블렌드 모드

배경 색상 값에 따라 곱하거나 스크린합니다.

소스 색상이 배경 위에 오버레이되며, 하이라이트와 그림자를 유지합니다. 배경 색상은 대체되지 않고 소스 색상과 혼합되어 배경의 밝기 또는 어둠을 반영합니다.

B(Cb, Cs) = HardLight(Cs, Cb)

Overlay는 hard-light 블렌드 모드의 역입니다. 공식은 hard-light 정의를 참고하세요.

10.1.5. darken 블렌드 모드

배경과 소스 색상 중 더 어두운 색을 선택합니다.

소스가 더 어두운 경우 배경이 소스로 대체되며, 그렇지 않으면 변경되지 않습니다.

B(Cb, Cs) = min(Cb, Cs)

10.1.6. lighten 블렌드 모드

배경과 소스 색상 중 더 밝은 색을 선택합니다.

소스가 더 밝은 경우 배경이 소스로 대체되며, 그렇지 않으면 변경되지 않습니다.

B(Cb, Cs) = max(Cb, Cs)

결과가 범위를 초과하면 내림하여야 합니다.

10.1.7. color-dodge 블렌드 모드

배경 색상을 밝게 하여 소스 색상을 반영합니다. 검정색으로 칠하면 변화가 없습니다.

if(Cb == 0)
    B(Cb, Cs) = 0
else if(Cs == 1)
    B(Cb, Cs) = 1
else
    B(Cb, Cs) = min(1, Cb / (1 - Cs))

10.1.8. color-burn 블렌드 모드

배경 색상을 어둡게 하여 소스 색상을 반영합니다. 흰색으로 칠하면 변화가 없습니다.

if(Cb == 1)
    B(Cb, Cs) = 1
else if(Cs == 0)
    B(Cb, Cs) = 0
else
    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

10.1.9. hard-light 블렌드 모드

소스 색상 값에 따라 곱하거나 스크린합니다. 효과는 배경에 강한 스포트라이트를 비추는 것과 유사합니다.

if(Cs <= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)

multiply와 screen 공식은 해당 정의를 참조하세요.

10.1.10. soft-light 블렌드 모드

소스 색상 값에 따라 색상을 어둡게 하거나 밝게 합니다. 효과는 배경에 확산된 스포트라이트를 비추는 것과 유사합니다.

    if(Cs <= 0.5)
        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
    else
        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
    if(Cb <= 0.25)
        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
    else
        D(Cb) = sqrt(Cb)

10.1.11. difference 블렌드 모드

두 색상 성분 중 더 어두운 값을 더 밝은 값에서 빼서 결과를 만듭니다.

흰색으로 칠하면 배경 색상이 반전되고, 검정색으로 칠하면 변화가 없습니다.

B(Cb, Cs) = | Cb - Cs |

10.1.12. exclusion 블렌드 모드

Difference 모드와 유사하지만 대비가 더 낮은 효과를 만듭니다. 흰색으로 칠하면 배경 색상이 반전되고, 검정색으로 칠하면 변화가 없습니다.

B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

10.2. 비분리형 블렌드 모드

비분리형 블렌드 모드는 각 색상 성분을 개별적으로 보는 분리형 모드와 달리 모든 색상 성분을 조합하여 처리합니다. 이러한 블렌드 모드는 개념적으로 다음과 같은 단계를 포함합니다:

배경과 소스 색상을 블렌딩 색상 공간에서 중간 단계의 색상-채도-명도(hue-saturation-luminosity) 표현으로 변환합니다.
배경과 소스 색상에서 선택한 hue, saturation, luminosity 성분을 조합하여 새로운 색상을 만듭니다.
결과를 원래의 색상 공간으로 되돌립니다.

비분리형 블렌드 모드 공식에서는 여러 보조 함수를 사용합니다:

    Lum(C) = 0.3 × Cred + 0.59 × Cgreen + 0.11 × Cblue

    ClipColor(C)
        L = Lum(C)
        n = min(Cred, Cgreen, Cblue)
        x = max(Cred, Cgreen, Cblue)
        if(n < 0)
            C = L + (((C - L) × L) / (L - n))

        if(x > 1)
            C = L + (((C - L) × (1 - L)) / (x - L))

        return C

    SetLum(C, l)
        d = l - Lum(C)
        Cred = Cred + d
        Cgreen = Cgreen + d
        Cblue = Cblue + d
        return ClipColor(C)

    Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

다음 함수에서 min, mid, max는 함수에 들어온 색상 성분 중 최소, 중간, 최대값을 의미합니다.

    SetSat(C, s)
        if(Cmax > Cmin)
            Cmid = (((Cmid - Cmin) × s) / (Cmax - Cmin))
            Cmax = s
        else
            Cmid = Cmax = 0
        Cmin = 0
        return C;

10.2.1. hue 블렌드 모드

소스 색상의 hue와 배경 색상의 채도와 명도로 색상을 만듭니다.

B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

10.2.2. saturation 블렌드 모드

소스 색상의 채도와 배경 색상의 hue와 명도로 색상을 만듭니다. 이 모드로 배경이 완전히 회색(채도 없음)인 영역에 칠하면 변화가 없습니다.

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

10.2.3. color 블렌드 모드

소스 색상의 hue와 채도, 배경 색상의 명도로 색상을 만듭니다. 이것은 배경의 회색 단계를 유지하며, 흑백 이미지를 색칠하거나 컬러 이미지를 틴트하는 데 유용합니다.

B(Cb, Cs) = SetLum(Cs, Lum(Cb))

10.2.4. luminosity 블렌드 모드

소스 색상의 명도와 배경 색상의 hue와 채도로 색상을 만듭니다. 이는 Color 모드와 반대 효과를 냅니다.

B(Cb, Cs) = SetLum(Cb, Lum(Cs))

10.3. 그룹 격리의 블렌딩 효과

참고: 다음 예제에서, 종이 비행기를 구성하는 요소들은 한 그룹 내에 있습니다. 각 요소의 블렌드 모드는 multiply로 설정되어 있습니다.

왼쪽 비행기는 일반 그룹, 오른쪽 비행기는 격리된 그룹입니다.

격리된 그룹에서는 그룹 내 요소들이 빈 초기 배경에 합성되어 그룹 내 요소들이 배경과 곱해지는 것을 방지합니다. 일반 그룹에서는 그룹 내 요소들이 땅과 하늘이 포함된 초기 배경에 합성되므로 비행기 요소들이 땅과 하늘과 곱해집니다. 두 경우 모두, 그룹 합성의 결과는 일반 mix-blend-mode(그룹에 적용된 기본 mix-blend-mode)를 사용하여 땅과 하늘에 합성됩니다.

개인정보 보호 고려사항

이 명세서에는 새로운 개인정보 보호 고려사항이 보고되지 않았습니다.

보안 고려사항

블렌딩 및 합성 연산의 타이밍이 소스와 대상 픽셀에 의존하지 않는 것이 중요합니다. 연산은 픽셀 값과 무관하게 항상 동일한 시간이 소요되도록 구현해야 합니다.

이 규칙을 따르지 않으면 공격자가 정보를 추론하여 타이밍 공격을 할 수 있습니다.

타이밍 공격이란 연산이 수행되는 시간을 분석하여 보호된 콘텐츠에 대한 정보를 얻는 방법입니다. 예를 들어, 빨간 픽셀을 그리는 데 초록 픽셀보다 시간이 더 걸린다면, 렌더링되는 요소의 내용을 직접 볼 수 없어도 대략적인 이미지를 복원할 수 있습니다.

변경사항

다음 변경사항은 2015년 1월 13일자 후보 권고안과 비교하여 이루어졌습니다:

개인정보 보호 및 보안 섹션 추가
Animatable: no를 Animation type: discrete로 업데이트
HTML과 SVG의 루트 요소 및 루트 요소 그룹 정의
루트 그룹이 반드시 불투명한 흰색이 아니라는 점 명확화
루트 그룹 및 격리 그룹에 대한 더 나은 정의
곱셈 기호 ×를 일관적으로 사용, x 또는 * 대신
green이 lime이어야 하는 예시 수정
background-blend-mode의 초기값 수정
마크업 및 링크 오류 수정

다음 변경사항은 2014년 2월 20일자 후보 권고안과 비교하여 이루어졌습니다:

<img>로 임베드된 SVG 이미지 강제 격리 위험 항목 제거
<composite-mode>에서 destination 옵션 제거

다음 변경사항은 2014년 1월 7일자 Last Call Working draft와 비교하여 이루어졌습니다:

불필요한 규범 및 참고문헌 삭제

다음 변경사항은 2013년 10월 10일자 Last Call Working draft와 비교하여 이루어졌습니다:

비규범 섹션에서 knockout 제거
단순 알파 합성에서 SVG 관련 문단 제거
개요에서 CSS 포함 및 의도 명확화
clip-to-self 및 참조 제거
5-10장 섹션을 규범적으로 변경 + 해당 섹션의 주석/예시 명확화

다음 변경사항은 2013-06-25 Working Draft와 비교하여 이루어졌습니다:

SVG에서 격리 그룹을 생성하는 연산자에서 clipping 제거
background-blend-mode가 다른 background 구문과 반복 동작 일치하도록 변경
mix-composite 속성 제거
모든 오픈 이슈 해결

테스트

opacity-and-transform-animation-crash.html (실시간 테스트) (소스)

적합성

문서 규약

적합성 요구 사항은 설명적 단언과 RFC 2119 용어의 조합으로 표현됩니다. 규범적 부분에서 “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL” 등의 키워드는 RFC 2119에 정의된 대로 해석되어야 합니다. 그러나 가독성을 위해 이 명세서에서는 이 단어들을 모두 대문자로 표기하지 않습니다.

이 명세서의 모든 텍스트는 명시적으로 비규범적, 예시, 참고로 표시된 섹션을 제외하고는 규범적입니다. [RFC2119]

이 명세서의 예시는 “예를 들어(for example)”로 시작하거나 class="example"와 같이 규범적 텍스트와 구분됩니다:

참고 노트는 “Note”로 시작하며 class="note"로 규범 텍스트와 구분됩니다:

권고(advisement)는 특별한 주의를 환기하도록 스타일링된 규범 섹션이며, <strong class="advisement">로 구분됩니다: UA는 반드시 접근 가능한 대체 수단을 제공해야 합니다.

적합성 클래스

이 명세서에 대한 적합성은 세 가지 적합성 클래스에 대해 정의됩니다:

스타일 시트가 이 명세서에 적합하려면, 이 모듈에서 정의된 문법을 사용하는 모든 문이 CSS 일반 문법과 각 기능의 개별 문법에 따라 유효해야 합니다.

렌더러가 이 명세서에 적합하려면, 스타일 시트를 적절한 명세서에 정의된 대로 해석하는 것 외에도, 이 명세서에서 정의된 모든 기능을 올바르게 파싱하고 문서를 그에 따라 렌더링해야 합니다. 단, UA가 기기 제한 때문에 문서를 올바르게 렌더링하지 못해도 UA가 적합하지 않은 것은 아닙니다. (예: UA가 단색 모니터에서 색상을 렌더링할 필요는 없음)

저작 도구가 이 명세서에 적합하려면, CSS 일반 문법과 각 기능의 개별 문법에 따라 문법적으로 올바른 스타일 시트를 작성하고, 이 모듈에 설명된 스타일 시트의 모든 다른 적합성 요구 사항을 충족해야 합니다.

부분 구현

작성자가 앞으로도 호환 가능한 파싱 규칙을 활용하여 대체 값을 지정할 수 있도록, CSS 렌더러는 반드시 지원하지 않는 at-rule, 속성, 속성 값, 키워드, 기타 구문 구조를 모두 무효로 취급(및 적절히 무시)해야 합니다. 특히, UA는 지원되지 않는 구성 값만 무시하고, 지원되는 값은 적용하는 식의 선택적 무시는 절대 금지입니다. 한 속성 선언에서 값 중 하나라도 무효(미지원 값)로 간주되면 CSS에서는 전체 선언을 무시해야 합니다.

불안정 및 독점 기능 구현

향후 안정적인 CSS 기능과의 충돌을 방지하기 위해, CSSWG는 모범 사례에 따라 불안정 기능과 독점 확장 구현을 권장합니다.

비실험적 구현

명세서가 후보 권고 단계에 도달하면, 비실험적 구현이 가능하며, 구현자는 명세서대로 올바르게 구현되었음을 입증할 수 있는 CR-level 기능에 대해 접두어 없는 구현을 릴리스해야 합니다.

CSS의 구현 간 상호운용성을 확립·유지하기 위해, CSS 워킹 그룹은 비실험적 CSS 렌더러에게 W3C에 구현 보고서(및 필요시 해당 테스트 케이스)를 제출한 후에만 CSS 기능에 대한 접두어 없는 구현을 릴리스할 것을 요청합니다. W3C에 제출된 테스트 케이스는 CSS 워킹 그룹의 검토 및 수정 대상이 됩니다.

테스트 케이스 및 구현 보고서 제출에 대한 추가 정보는 CSS 워킹 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 문의사항은 public-css-testsuite@w3.org 메일링 리스트로 문의하세요.

CR 종료 기준

이 명세서가 제안된 권고안 단계로 진전되려면, 각 기능에 대해 최소 두 개의 독립적이고 상호운용 가능한 구현이 있어야 합니다. 각 기능은 서로 다른 제품 집합에 의해 구현될 수 있으며, 모든 기능을 단일 제품이 구현할 필요는 없습니다. 이 기준에 대해 다음 용어를 정의합니다:

합성 및 블렌딩 레벨 1

개요

이 문서의 상태

1. 소개

2. 이 문서 읽기

2.1. 모듈 상호작용

2.2. 값

3. CSS에서 블렌딩 지정

3.1. 그래픽 연산 순서

3.2. HTML에 특정한 동작

3.3. SVG에 특정한 동작

3.4. CSS 속성

3.4.1. mix-blend-mode 속성

3.4.2. isolation 속성

3.4.3. background-blend-mode 속성

4. Canvas 2D에서 합성과 블렌딩 지정

5. 합성 소개

5.1. 단순 알파 합성

5.1.1. 단순 알파 합성 예시

6. 합성과 블렌딩의 일반 공식

7. 배경 계산

7.1. 배경 계산 예시

8. 합성 그룹

8.1. 그룹 불변성

8.2. 격리된 그룹

8.3. 루트 요소 그룹

8.4. 루트 그룹

9. 고급 합성 기능

9.1. Porter Duff 합성 연산자

9.1.1. Clear

9.1.2. Copy

9.1.3. Destination

9.1.4. Source Over

9.1.5. Destination Over

9.1.6. Source In

9.1.7. Destination In

9.1.8. Source Out

9.1.9. Destination Out

9.1.10. Source Atop

9.1.11. Destination Atop

9.1.12. XOR

9.1.13. Lighter

9.2. Porter Duff 모드에서 그룹 합성 동작

10. 블렌딩

10.1. 분리형 블렌드 모드

10.1.1. normal 블렌드 모드

10.1.2. multiply 블렌드 모드

10.1.3. screen 블렌드 모드

10.1.4. overlay 블렌드 모드

10.1.5. darken 블렌드 모드

10.1.6. lighten 블렌드 모드

10.1.7. color-dodge 블렌드 모드

10.1.8. color-burn 블렌드 모드

10.1.9. hard-light 블렌드 모드

10.1.10. soft-light 블렌드 모드

10.1.11. difference 블렌드 모드

10.1.12. exclusion 블렌드 모드

10.2. 비분리형 블렌드 모드

10.2.1. hue 블렌드 모드

10.2.2. saturation 블렌드 모드

10.2.3. color 블렌드 모드

10.2.4. luminosity 블렌드 모드

10.3. 그룹 격리의 블렌딩 효과

개인정보 보호 고려사항

보안 고려사항

변경사항

적합성

문서 규약

적합성 클래스

부분 구현

불안정 및 독점 기능 구현

비실험적 구현

CR 종료 기준

색인

이 명세서에서 정의된 용어

참고로 정의된 용어

참고문헌

규범적 참고문헌

참고용 참고문헌

속성 색인