CSS. blend-mode

ETC

(*ᴗ͈ˬᴗ͈)ꕤ*.ﾟ 2022. 5. 3. 11:41

포트폴리오...포트폴리오...포트폴리오...

예쁘게 만들자 포트폴리오...

요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의한다

보통, z-index가 높은 값이 공간을 차지한다

(불투명한 종이를 겹친 것과 같다)

하지만 이를 조금 더 색다르게, 표현할 수 있다

최상단 색을 사용한다

background-blend-mode: nomal;

최종 색은 전경과 배경색을 곱한 값이다.
검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않는다.
투명한 필름에 프린트한 이미지를 서로 겹친 것과 같다.

background-blend-mode: multiply;

최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값이다.

즉, multiply의 반전이다
검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만든다.
프로젝터 두 대로 이미지를 겹친 것과 같다.

background-blend-mode: screen;

배경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용(편한 기능이군)
hard-light와 같지만 배경과 전경을 뒤집은 것이다.

background-blend-mode: overlay;

최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과

background-blend-mode: darken;

최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과

background-blend-mode: lighten;

최종 색은 배경색을 전경색의 역으로 나눈 결과
검은 전경색은 아무런 변화도 주지 않고 전경색이 배경색의 역인 경우 제일 밝은 색이 된다.
screen과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환한다는 특징이 있다

background-blend-mode: color-dodge;

최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과
하얀 전경색은 아무런 변화도 주지 않는다. 전경색이 배경색의 역인 경우 결과는 검은색이다.
multiply와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환

background-blend-mode: color-burn;

전경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용한다
overlay와 같지만 배경과 전경을 뒤집은 것이다
배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사하다

background-blend-mode: hard-light;

hard-light와 유사하지만 더 부드럽다
hard-light와 비슷하게 동작한다
배경색에 스포트라이트를 산란시켜 비춘 효과와 유사하다

background-blend-mode: soft-light;

최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과이다
검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 낸다.

background-blend-mode: difference;

difference와 유사하지만 더 적은 대비를 가진 색을 반환한다
difference와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 낸다.

background-blend-mode: exclusion;

최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가진다.

background-blend-mode: hue;

최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가진다.
색조 없는 순수한 회색 배경으로는 아무런 효과도 없다.

background-blend-mode: saturation;

최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가진다.
회색조를 유지하므로 전경을 색칠할 때 사용할 수 있다.

background-blend-mode: color;

최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가진다.
color와 동일하지만 배경과 전경을 뒤집은 것입니다.

background-blend-mode: luminosity;

글로 백날 설명해봐야 한 번 보는 것만 못하다

이건 무조건 mdn에 들러서 무슨 그림인가 봐야 한다

출처 mdn