background-blend-mode

background-blend-mode (배경 혼합 모드)

요소의 배경 이미지와 배경색이 서로 어떻게 섞일지(blend)를 정하는 유틸리티예요. 곱하기(multiply)나 오버레이 같은 다양한 혼합 모드를 지원해요.

출처: 문서

본문

ClassStyles

클래스	스타일
`bg-blend-normal`	`background-blend-mode: normal;`
`bg-blend-multiply`	`background-blend-mode: multiply;`
`bg-blend-screen`	`background-blend-mode: screen;`
`bg-blend-overlay`	`background-blend-mode: overlay;`
`bg-blend-darken`	`background-blend-mode: darken;`
`bg-blend-lighten`	`background-blend-mode: lighten;`
`bg-blend-color-dodge`	`background-blend-mode: color-dodge;`
`bg-blend-color-burn`	`background-blend-mode: color-burn;`
`bg-blend-hard-light`	`background-blend-mode: hard-light;`
`bg-blend-soft-light`	`background-blend-mode: soft-light;`
`bg-blend-difference`	`background-blend-mode: difference;`
`bg-blend-exclusion`	`background-blend-mode: exclusion;`
`bg-blend-hue`	`background-blend-mode: hue;`
`bg-blend-saturation`	`background-blend-mode: saturation;`
`bg-blend-color`	`background-blend-mode: color;`
`bg-blend-luminosity`	`background-blend-mode: luminosity;`

Examples

Basic example

bg-blend-difference나 bg-blend-saturation 같은 유틸리티를 사용하면 요소의 배경 이미지와 배경색이 섞이는 방식을 조절할 수 있어요.

<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ..."></div>

Responsive design

background-blend-mode 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten md:bg-blend-darken ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.