혼합 모드

CSS 팟캐스트 - 024: 혼합 모드 를 통해 개인정보처리방침을 정의할 수 있습니다.

Duotone은 사진에 인기 있는 색상 처리입니다. 이미지가 두 가지 대비되는 색상으로만 이루어진 것처럼 보이게 합니다. 한 개는 하이라이트용이고 다른 한 개는 낮은 조명용입니다. CSS로는 어떻게 이를 수행할 수 있을까요?

혼합 모드 및 그 밖에 배운 기술을 사용하면 예를 들어 filter pseudo-elements - 이 효과를 모든 이미지에 적용할 수 있습니다.

혼합 모드란 무엇인가요?

혼합 모드는 Photoshop과 같은 디자인 도구에서 일반적으로 사용됩니다. 을 사용하여 두 개 이상의 레이어에서 색상을 혼합하여 구성 효과를 낼 수 있습니다. 색상이 혼합되는 방식을 변경하여 정말 흥미로운 시각 효과를 얻을 수 있습니다. 또한 혼합 모드를 유틸리티로 사용할 수도 있습니다. 예를 들어 배경이 흰색인 이미지를 분리하거나 배경이 투명한 것처럼 보이게 합니다.

CSS와 함께 디자인 도구에서 사용할 수 있는 대부분의 혼합 모드를 사용할 수 있습니다. 사용 mix-blend-mode 또는 background-blend-mode 속성. mix-blend-mode는 전체 요소에 블렌딩을 적용합니다. background-blend-mode는 요소의 배경에 블렌딩을 적용합니다.

요소에 배경이 여러 개 있는 경우 background-blend-mode를 사용합니다. 이 모든 것이 서로 섞이기를 바랍니다.

mix-blend-mode는 전체 요소에 영향을 미칩니다. 많은 것을 알 수 있습니다. 한 가지 사용 사례는 듀오톤 이미지의 초기 예시입니다. 의 유사 요소를 통해 요소에 적용된 색상 레이어가 있습니다.

혼합 모드는 분리 가능 및 분리 불가능의 두 가지 범주로 나뉩니다. 분리 가능한 혼합 모드는 각 색상 구성요소를 고려하고 개별적으로 구현됩니다. 분리할 수 없는 혼합 모드는 모든 색상 구성요소를 동일하게 고려합니다.

브라우저 호환성

mix-blend-mode

브라우저 지원

  • Chrome: 41. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 32. <ph type="x-smartling-placeholder">
  • Safari: 8. <ph type="x-smartling-placeholder">

소스

background-blend-mode

브라우저 지원

  • Chrome: 35. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 30. <ph type="x-smartling-placeholder">
  • Safari: 8. <ph type="x-smartling-placeholder">

소스

분리 가능한 혼합 모드

보통

이는 기본 혼합 모드이며 요소가 다른 요소와 혼합되는 방식에는 아무것도 변경하지 않습니다.

곱하기

multiply 혼합 모드는 여러 투명도를 층층이 쌓는 것과 같습니다. 흰색 픽셀은 투명해 보이지만 검은색 픽셀은 검은색으로 표시됩니다. 이 사이에 있는 것은 광도 (밝기) 값을 곱합니다. 즉, 조명이 훨씬 밝아지고 어두워집니다. 어둡게 - 대부분의 경우 어두운 결과를 생성합니다.

.my-element {
  mix-blend-mode: multiply;
}

화면

screen를 사용하면 light 값이 곱해집니다. 이는 multiply에 반비례합니다. 대부분의 경우 더 밝은 결과를 얻을 수 있습니다.

.my-element {
  mix-blend-mode: screen;
}

오버레이

이 혼합 모드(overlay)는 multiply와 screen를 결합합니다. 기본 어두운 색상은 어두워지고 기본 밝은 색상은 밝아집니다. 50% 회색과 같은 중간 범위의 색상은 영향을 받지 않습니다.

.my-element {
  mix-blend-mode: overlay;
}

어둡게

darken 혼합 모드는 소스 이미지와 배경화면 이미지의 어두운 색상 광도를 비교합니다. 둘 중 가장 어두운 색을 선택합니다. multiply 및 screen처럼 광도 대신 rgb 값을 비교하여 실행합니다. 나타냅니다. darken 및 lighten를 사용하면 이 비교 프로세스에서 새 색상 값이 생성되는 경우가 많습니다.

.my-element {
  mix-blend-mode: darken;
}

Lighten

lighten를 사용하면 darken와 완전히 반대됩니다.

.my-element {
  mix-blend-mode: lighten;
}

색상 닷지

color-dodge를 사용하면 소스 색상이 반영되도록 배경 색상이 밝아집니다. 순수한 검은색 색상에는 이 모드에서 효과가 없습니다.

.my-element {
  mix-blend-mode: color-dodge;
}

색상 번

color-burn 혼합 모드는 multiply 혼합 모드와 매우 유사합니다. 대비는 높아져 중간톤의 채도가 높아지고 밝은톤이 줄어듭니다.

.my-element {
  mix-blend-mode: color-burn;
}

하드 라이트

hard-light를 사용하면 생생한 대비를 이룰 수 있습니다. 이 혼합 모드는 화면을 표시하거나 광도 값을 곱합니다. 픽셀 값이 회색 50% 보다 밝으면 이미지가 밝아집니다. 될 수 있습니다. 색이 더 어두우면 곱합니다.

.my-element {
  mix-blend-mode: hard-light;
}

소프트 라이트

soft-light 혼합 모드는 overlay의 덜 까다로운 버전입니다. 대비는 거의 없이 거의 동일하게 작동합니다.

.my-element {
  mix-blend-mode: soft-light;
}

차이

difference의 작동 방식을 설명하는 좋은 방법은 네거티브 포토의 작동 방식과 비슷합니다. difference 혼합 모드는 각 픽셀의 차이 값을 가져와서 빛을 반전시킵니다. 색상 값이 동일하면 검은색이 됩니다. 값의 차이가 반전됩니다.

.my-element {
  mix-blend-mode: difference;
}

제외

exclusion를 사용하는 것은 difference와 매우 유사합니다. 동일한 픽셀에 대해 검은색을 반환하는 대신 50% 회색으로 반환되어 대비는 낮고 부드러운 결과물이 생성됩니다.

.my-element {
  mix-blend-mode: exclusion;
}

분리할 수 없는 혼합 모드

이러한 혼합 모드는 HSL 색상 구성요소와 비슷하다고 생각하면 됩니다. 각각은 활성 레이어에서 특정 구성요소 값을 가져와 다른 구성요소 값과 혼합합니다.

색조

hue 혼합 모드는 소스 색상의 색조를 사용합니다. 배경화면 색상의 채도와 광도에 적용합니다.

.my-element {
  mix-blend-mode: hue;
}

채도

다음과 같이 작동합니다. hue saturation를 혼합 모드로 사용하면 소스 색상의 채도가 적용됩니다. 색을 입힐 수 있습니다.

.my-element {
  mix-blend-mode: saturation;
}

색상

color 혼합 모드는 소스 색상의 색조와 채도로 색상을 만듭니다. 명료해야 합니다.

.my-element {
  mix-blend-mode: color;
}

밝기

마지막으로 luminosity는 color의 역입니다. 소스 색상의 광도와 배경화면 색상의 색조 및 채도로 색상을 생성합니다.

.my-element {
  mix-blend-mode: luminosity;
}

isolation 속성

브라우저 지원

  • Chrome: 41. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 36 <ph type="x-smartling-placeholder">
  • Safari: 8. <ph type="x-smartling-placeholder">

소스

isolation를 설정하는 경우 속성 값을 isolate로 설정하면 새 스태킹 컨텍스트를 생성하고 배경화면 레이어와 섞이지 않습니다. Z-색인 모듈에서 알아본 것처럼 새 스태킹 컨텍스트를 만들 때 해당 레이어가 기본 레이어가 됩니다. 즉, 상위 수준 혼합 모드는 더 이상 적용되지 않으며 그러나 isolation: isolate가 설정된 요소 내부의 요소는 여전히 블렌딩할 수 있습니다.

background-blend-mode에서는 작동하지 않습니다. 이는 백그라운드 속성이 이미 격리되어 있기 때문입니다.

이해도 확인

혼합 모드에 관한 지식 테스트

다음 중 CSS 혼합 모드는 무엇인가요?

차이
🎉
Lighten
🎉
밝게
다시 시도해 보세요.
Dullen
다시 시도해 보세요.
곱하기
🎉
오버레이
🎉

여러 색상을 다양한 방식으로 혼합하려면 어떤 스타일의 혼합 모드가 필요한가요?

분리 가능
이러한 혼합 모드는 색상 채널 타겟팅 효과를 제공합니다.
분리 불가능
다시 시도해 보세요. 분리 불가능은 색상 채널을 인식하지 못합니다.