[CSS] 텍스트, 이미지 반전 효과 css

최근에 효과에 관심이 많아져서 찾아보게 되었다.
이미지 혹은 텍스트가 겹칠 때 겹치는 부분이 반전효과로 구분되면 좋겠다 싶어서 찾아봤다.

mix-blend-mode라는 혼합모드 설정하는 css를 사용하는 간단한 방법이 있었다.
많은 효과(?)가 있는데 그 중에서 나는 아래것을 사용해 봤다.

mix-blend-mode: difference;

적용 전	적용후

(개인작업 중인 페이지에서 캡쳐해왔다.)
비교해보면 알겠지만 겹치는 부분끼리 혼합이 일어났다.

(모질라 사이트에서 캡쳐해옴)
mix-blend-mode는 여러 효과가 있으니 보고 필요한 효과를 사용하면 될 것 같다.

참고 :
https://brunch.co.kr/@skykamja24/524

---

내가 찾던건 아니지만 알아두면 좋을 것 같아서 모아봤다.

filter: invert(100%)

적용하면 지정된 색에서 반전된다.
(모질라 사이트에서 캡쳐해옴)

참고:
https://velog.io/@korea_webclass/css-filter

css 공부 : 색상, 이미지 반전 시켜주기 (css 반전)

https://developer.mozilla.org/ko/docs/Web/CSS/filter