CSS Types

CSS Types

Editing

<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

사용되는 키워드

키워드요약
color

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

color-burn

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

color-dodge

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

darken

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

difference

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

exclusion

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

hard-light

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

hue

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

lighten

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

luminosity

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

multiply

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

normal

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

overlay

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

saturation

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

screen

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

soft-light

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

관련 속성들

버전 명세

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

Last review date: 2022-12-9