Design Kits Blog

mix-blend-mode는 두 개의 요소가 겹쳐질 때 그들 간의 색상 혼합을 조절하는 데 사용됩니다.

이 속성을 사용하면 두 요소 사이의 색상을 믹스하거나, 혹은 특정한 방식으로 결합하여 렌더링할 수 있습니다. 

일반적으로 배경 이미지나 텍스트와 배경의 상호작용을 조절하는 데 유용합니다.

mix-blend-mode 속성은 다양한 값을 가질 수 있습니다. 주로 사용되는 값들은 아래와 같습니다:

normal: 기본값으로, 일반적인 렌더링을 수행합니다.

multiply: 색상을 곱하여 어두운 효과를 만듭니다.

screen: 색상을 스크린 합성하여 밝은 효과를 만듭니다.

overlay: 색상을 오버레이 합성하여 대비를 강화합니다.

darken: 각 채널의 최솟값을 사용하여 어두운 효과를 만듭니다.

lighten: 각 채널의 최댓값을 사용하여 밝은 효과를 만듭니다.

color-dodge: 컬러 도지 합성을 사용하여 밝은 효과를 만듭니다.

color-burn: 컬러 번 합성을 사용하여 어두운 효과를 만듭니다.

hard-light: 하드 라이트 합성을 사용하여 대비를 강화합니다.

soft-light: 소프트 라이트 합성을 사용하여 부드러운 효과를 만듭니다.

difference: 두 색상의 차이를 보여줍니다.

exclusion: 배제 합성을 사용하여 색상을 배제합니다.

See the Pen css blend mode by designkits (@designkits) on CodePen.