mix-blend-mode 블렌딩 모드를 설정하는 속성

mix-blend-mode는 CSS의 블렌딩 모드를 설정하는 속성으로, 두 개의 요소(일반적으로 요소와 해당 요소의 배경)를 섞는 데 사용됩니다. 
이것은 주로 텍스트, 이미지 또는 요소 간의 블렌딩 및 합성 효과를 조절할 때 유용합니다. 
다음은 각 mix-blend-mode 값에 대한 설명입니다.

 

/* Keyword values */
mix-blend-mode: normal; 기본 값으로, 아무런 블렌딩 효과를 가하지 않습니다.
mix-blend-mode: multiply; 두 색상을 곱하여 어두운 결과를 생성합니다. 검은 배경에서는 영향이 없습니다.
mix-blend-mode: screen; 두 색상을 반전하고 곱하여 밝은 결과를 생성합니다. 검은 배경에서는 원래 이미지를 유지합니다.
mix-blend-mode: overlay; 두 색상을 곱하거나 스크린 블렌딩하여 대비를 높입니다. 배경이 중요한 영향을 미칩니다.
mix-blend-mode: darken; 두 색상 중 더 어두운 색상을 선택합니다.
mix-blend-mode: lighten; 두 색상 중 더 밝은 색상을 선택합니다.
mix-blend-mode: color-dodge; 배경을 화이트아웃하며, 원래 이미지의 색상을 화이트에 가깝게 만듭니다.
mix-blend-mode: color-burn; 배경을 검은색으로 채우며, 원래 이미지의 색상을 어둡게 만듭니다.
mix-blend-mode: hard-light; 대비를 높이는 데 사용하며, 배경의 밝고 어두운 부분에 따라 결과가 다릅니다.
mix-blend-mode: soft-light; 대비를 부드럽게 조절하며, 배경의 밝고 어두운 부분에 따라 결과가 다릅니다.
mix-blend-mode: difference; 두 색상 간의 차이를 계산하여 결과를 생성합니다.
mix-blend-mode: exclusion; 두 색상을 반전하여 결과를 생성합니다.
mix-blend-mode: hue; 색상(Hue)을 원본 이미지에서 가져와 배경 색상과 결합합니다.
mix-blend-mode: saturation; 원본 이미지의 채도(Saturation)를 가져와 배경 색상과 결합합니다.
mix-blend-mode: color; 원본 이미지의 색상을 가져와 배경 색상과 결합합니다.
mix-blend-mode: luminosity; 원본 이미지의 밝기(Luminosity)를 가져와 배경 색상과 결합합니다.

/* Global values */
mix-blend-mode: initial; 요소의 속성을 기본 값으로 초기화합니다.
mix-blend-mode: inherit; 부모 요소의 속성을 상속합니다.
mix-blend-mode: unset; 요소의 속성을 초기화하거나 상속할 것인지에 대한 상황에 따라 처리합니다.

이러한 mix-blend-mode 값들은 두 개의 색상(요소와 배경의 색상)을 섞어 다양한 시각적 효과를 만들 수 있습니다. 
각 값은 특정한 블렌딩 알고리즘을 사용하여 색상을 조정하므로 원하는 시각적 효과를 얻기 위해 다양하게 실험해보세요.