효과
mix-blend-mode
엘리먼트가 배경과 어떻게 혼합될지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
mix-blend-normal | mix-blend-mode: normal; |
mix-blend-multiply | mix-blend-mode: multiply; |
mix-blend-screen | mix-blend-mode: screen; |
mix-blend-overlay | mix-blend-mode: overlay; |
mix-blend-darken | mix-blend-mode: darken; |
mix-blend-lighten | mix-blend-mode: lighten; |
mix-blend-color-dodge | mix-blend-mode: color-dodge; |
mix-blend-color-burn | mix-blend-mode: color-burn; |
mix-blend-hard-light | mix-blend-mode: hard-light; |
mix-blend-soft-light | mix-blend-mode: soft-light; |
mix-blend-difference | mix-blend-mode: difference; |
mix-blend-exclusion | mix-blend-mode: exclusion; |
mix-blend-hue | mix-blend-mode: hue; |
mix-blend-saturation | mix-blend-mode: saturation; |
mix-blend-color | mix-blend-mode: color; |
mix-blend-luminosity | mix-blend-mode: luminosity; |
mix-blend-plus-darker | mix-blend-mode: plus-darker; |
mix-blend-plus-lighter | mix-blend-mode: plus-lighter; |
예제
기본 예제
mix-blend-overlay와 mix-blend-soft-light 같은 유틸리티를 사용하여 엘리먼트의 콘텐츠와 배경이 같은 z-index 기반 레이어링 내의 다른 콘텐츠와 어떻게 혼합되는지 제어할 수 있습니다:
<div class="flex justify-center -space-x-14"> <div class="bg-blue-500 mix-blend-multiply ..."></div> <div class="bg-pink-500 mix-blend-multiply ..."></div></div>블렌딩 격리
부모 엘리먼트에 isolate 유틸리티를 사용하여 새로운 z-index 기반 레이어링을 생성하고, 뒤에 있는 콘텐츠와의 블렌딩을 방지할 수 있습니다:
<div class="isolate flex justify-center -space-x-14"> <div class="bg-yellow-500 mix-blend-multiply ..."></div> <div class="bg-green-500 mix-blend-multiply ..."></div></div><div class="flex justify-center -space-x-14"> <div class="bg-yellow-500 mix-blend-multiply ..."></div> <div class="bg-green-500 mix-blend-multiply ..."></div></div>반응형 디자인
접두사 a mix-blend-mode 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="mix-blend-multiply md:mix-blend-overlay ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
