CSS - 이미지 중첩 효과 mix-blend-mode (포토샵 효과)

닌니디자인 CSS 썸네일

mix-blend-mode

요소의 배경과 부모 요소 또는 뒤에 있는 요소 간의 색상을 어떻게 혼합할지를 지정하는 속성. 이를 통해 이미지나 텍스트가 배경과 조화를 이루도록 시각적인 효과를 낼 수 있다.

normal	기본값으로, 혼합 없이 원래 색상을 그대로 표시한다.
multiply	배경과 요소의 색상을 곱하여 어두운 색상이 나타난다.
screen	배경과 요소의 색상을 반대로 곱해 밝은 색상이 나타난다.
overlay	multiply와 screen을 결합한 효과로, 어두운 부분은 더 어둡게, 밝은 부분은 더 밝게 만든다.
darken	두 색상 중 더 어두운 색상을 표시한다.
lighten	두 색상 중 더 밝은 색상을 표시한다.
color-dodge	배경 색상을 더 밝게 한다.
color-burn	배경 색상을 더 어둡게 한다.
hard-light	배경의 색상이 50% 회색보다 어두운 경우 - multiply 모드처럼 작동하여 배경을 어둡게 만든다. 배경의 색상이 50% 회색보다 밝은 경우 - screen 모드처럼 작동하여 배경을 밝게 만든다.
soft-light	요소가 배경보다 밝을 때 - 배경을 밝게 하지만, screen 모드만큼 강하지는 않다. 요소가 배경보다 어두울 때 - 배경을 어둡게 하지만, multiply 모드처럼 강하게 어둡게 하지는 않다.
difference	두 색상의 차이를 계산하여 표시한다.
exclusion	difference와 유사하지만 대비가 낮아진다.
hue	요소의 색상을 배경의 명도와 채도에 적용한다.
saturation	요소의 채도를 배경의 색조와 명도에 적용한다.
color	요소의 색상을 배경의 채도와 명도에 적용한다.
luminosity	요소의 명도를 배경의 색조와 채도에 적용한다.

 

 

 

---

 

multiply

 

 

screen

 

 

overlay

 

 

darken

 

 

lighten

 

 

color-dodge

 

 

color-burn

 

 

hard-light

 

 

soft-light

 

 

difference

 

 

exclusion

 

 

hue

 

 

saturation

 

 

color

 

 

luminosity