<blend-mode>
CSS <blend-mode>
자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. background-blend-mode
(en-US)와 mix-blend-mode
속성에서 사용합니다.
최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.
구문
<blend-mode>
자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.
값
normal
-
배경색에 상관하지 않고 최상단 색을 사용합니다.
두 장의 불투명한 종이를 겹친 것과 같습니다. multiply
-
최종 색은 전경과 배경색을 곱한 값입니다.
검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다.
투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다. screen
-
최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다.
검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다.
프로젝터 두 대로 이미지를 겹친 것과 같습니다. overlay
- 배경색이 더 어두운 경우
multiply
, 더 밝은 경우screen
을 적용합니다.
hard-light
와 같지만 배경과 전경을 뒤집은 것입니다. darken
-
최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.
lighten
-
최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.
color-dodge
-
최종 색은 배경색을 전경색의 역으로 나눈 결과입니다.
검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다.
screen
과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다. color-burn
-
최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다.
하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다.
multiply
와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다. hard-light
-
전경색이 더 어두운 경우
multiply
, 더 밝은 경우screen
을 적용합니다.
overlay
와 같지만 배경과 전경을 뒤집은 것입니다.
배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다. soft-light
-
hard-light
와 유사하지만 더 부드럽습니다.
hard-light
와 비슷하게 동작합니다.
배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다. difference
-
최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.
검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다. exclusion
-
difference
와 유사하지만 더 적은 대비를 가진 색을 반환합니다.
difference
와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다. hue
-
최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.
saturation
-
최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다.
색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다. color
-
최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다.
회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다. luminosity
-
최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다.
color
와 동일하지만 배경과 전경을 뒤집은 것입니다.
혼합 모드의 보간
혼합 모드는 보간 대상이 아니며 모든 변경점은 즉시 발생합니다.
명세
Specification | Status | Comment |
---|---|---|
Compositing and Blending Level 1 The definition of '<blend-mode>' in that specification. |
Candidate Recommendation | Initial definition. |
브라우저 호환성
BCD tables only load in the browser
같이 보기
<blend-mode>
를 사용하는 속성:background-blend-mode
(en-US),mix-blend-mode
각각의 혼합 모드에 대한 설명을 다루는 외부 웹 페이지:
- 위키백과 블렌드 모드
- Adobe Adobe Photoshop에서의 혼합 모드