백그라운드 색상과 백그라운드 이미지를 혼합 했을 때 효과를 만들어 주기 때문에, 두가지 요소가 없다면, 적용이 안 될 수 있습니다. 포토샵의 브랜드 효과와 동일하다고 보시면 됩니다.

background-blend-mode

background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.

정의(Definition)

• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• blend-mode는 크게 background-blend-mode와 mix-blend-mode로 설정됩니다.
• 포토샵의 브렌드 모드와 동일한 효과입니다.

백그라운드와 관련된 속성(Background Related Properties)

• background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-color 속성은 백그라운드 색을 설정합니다.
• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
• background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.

그래픽 효과와 관련된 속성(Graphic Related Properties)

• filter 속성은 그래픽 효과를 설정합니다.
• backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때 그래픽 효과를 설정합니다.
• mix-blend-mode 속성은 요소를 혼합했을 때 그래픽 효과를 설정합니다.

문법(Syntax)

background-blend-mode : normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

 /* 기본 속성 */
background-blend-mode : normal; 
background-blend-mode : multiply;
background-blend-mode : screen;
background-blend-mode : overlay; 
background-blend-mode : darken; 
background-blend-mode : lighten; 
background-blend-mode : color-dodge; 
background-blend-mode : color-burn;
background-blend-mode : hard-light;
background-blend-mode : soft-light;
background-blend-mode : difference;
background-blend-mode : exclusion;
background-blend-mode : hue;
background-blend-mode : saturation;
background-blend-mode : color;
background-blend-mode : luminosity;

/* 다중 속성 */
background-blend-mode : color-dodge, exclusion; 
background-blend-mode : color-dodge, hue; 

호환성(Compatibility)

						6	7	8	9	10	11
background-blend-mode	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C