[CSS] mix-blend-mode 의 사용법 , difference

안녕하세요. gaki 입니다.

오늘은 mix-blend-mode 에 대해서 알아보겠습니다.

 

mix-blend-mode 란, 자식이나 부모의 색깔에 따라서 본인의 색깔을 바꿀 수 있는 css 입니다.

이 속성에 대해서 알아보게된 계기는  https://www.martinbriceno.com/ 여기 웹사이트를 보다가

마우스 커서 주위에 생기는 원의 색깔이 페이지의 배경색깔에 따라서 바뀌는 것에 대한 이유를 찾다가 알게되었습니다.

 

원의 색깔이 배경색이 하얀색이면 검은색으로, 배경색이 검은색이면 하얀색으로 바뀌는걸 볼 수 있습니다. 

이러한 효과를 간단하게 mix-blend-mode 로 구현할 수 있습니다.

 

---

이 효과를 구현하기 위해서 mix-blend-mode 의 difference 속성을 이용할 것입니다.

difference 속성은 두가지 색중에서 더 밝은색에서 더 어두운색의 값을 뺀 색을 결과적인색으로 이용하는 것입니다.

 

예를들어, 원의 색깔을 white 인 (255,255,255) 로 놓았다고 가정해보겠습니다.

그러면 배경색이 white 일때 (255 - 255, 255-255,255-255) 로 색깔이 정해져서 결국 검은색으로 보이게되고,

반대로 배경색이 black 일땐

(255-0,255-0,-255-0) 으로 결국 하얀색으로 보여지게 되는것입니다.