background-blend-mode
한 요소에 겹쳐진 여러 배경 레이어를 어떻게 섞을지 정합니다. 배경은 위에서부터 배경 이미지들 → 배경색 순으로 쌓이며, 이 속성은 그 사이의 합성 방식을 포토샵의 레이어 블렌드처럼 바꿉니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bbmn | background-blend-mode: normal | 혼합 없음 (기본값) |
bbmm | background-blend-mode: multiply | 어두운 부분 강조 (포토샵 곱하기) |
bbms | background-blend-mode: screen | 밝은 부분 강조 (포토샵 스크린) |
bbmo | background-blend-mode: overlay | multiply와 screen 조합 |
bbmd | background-blend-mode: darken | 더 어두운 색을 선택 |
bbml | background-blend-mode: lighten | 더 밝은 색을 선택 |
bbmcd | background-blend-mode: color-dodge | 밝기를 높여 반영 |
bbmcb | background-blend-mode: color-burn | 밝기를 낮춰 반영 |
bbmhl | background-blend-mode: hard-light | 강한 오버레이 대비 |
bbmsl | background-blend-mode: soft-light | 부드러운 오버레이 대비 |
bbmdf | background-blend-mode: difference | 두 색의 차이 |
bbme | background-blend-mode: exclusion | difference와 유사(낮은 대비) |
bbmh | background-blend-mode: hue | 색상(hue)만 적용 |
bbmsa | background-blend-mode: saturation | 채도(saturation)만 적용 |
bbmco | background-blend-mode: color | 색상+채도 적용 |
bbmlu | background-blend-mode: luminosity | 명도(luminosity)만 적용 |
시각 데모
여덟 타일 모두 동일한 그라데이션 + 동일한 배경색이고 블렌드 모드만 다릅니다. 아래 레이어는 진한 마젠타, 위 레이어는 파랑에서 노랑으로 가는 그라데이션입니다.
normal — bbmn
multiply — bbmm
screen — bbms
overlay — bbmo
darken — bbmd
lighten — bbml
difference — bbmdf
luminosity — bbmlu
<!-- Every tile above: one gradient layer over one solid color layer -->
<div class="w100p h10rem br8px bglg-45deg-38BDF8-FACC15 bgFF0080 bbmm"></div>
<div class="w100p h10rem br8px bglg-45deg-38BDF8-FACC15 bgFF0080 bbms"></div>
<div class="w100p h10rem br8px bglg-45deg-38BDF8-FACC15 bgFF0080 bbmdf"></div>클래스별 상세
bbmnbackground-blend-mode: normal
기본값입니다. 위 레이어가 아래 레이어를 그대로 가립니다. 부모에서 상속된 블렌드 모드를 되돌릴 때 명시적으로 사용합니다.
<!-- Default: the top layer simply covers the one below -->
<div class="bbmn bglg-to-r-6366F1-A855F7 bg000000 h20rem br8px"></div>bbmmbackground-blend-mode: multiply
두 레이어의 색을 곱합니다. 결과는 항상 원본보다 어두워지고, 흰색과 곱하면 변화가 없습니다. 사진 위에 흰 글씨를 올려야 할 때 가장 많이 쓰는 모드입니다.
<!-- Tint a photo card toward the brand color -->
<div class="bbmm bg6366F1 bsc bgrn bgpc h30rem br8px df jcc aic">
<h3 class="cFFFFFF fs2-4rem fw700">Dark, brand-tinted hero</h3>
</div>bbmsbackground-blend-mode: screen
multiply의 반대입니다. 두 색의 보색을 곱한 뒤 다시 뒤집어 항상 원본보다 밝아집니다. 검정과 섞으면 변화가 없습니다. 어두운 사진을 띄워 대비를 낮출 때 씁니다.
<!-- Lift a dark photo so white text stays readable -->
<div class="bbms bg1E1E2E bsc bgrn bgpc h30rem br8px">
<p class="cFFFFFF p2rem">Washed-out, brighter backdrop</p>
</div>bbmobbmhlbbmsloverlay / hard-light / soft-light
밝기에 따라 multiply와 screen을 자동으로 나눠 적용합니다. 어두운 영역은 더 어둡게, 밝은 영역은 더 밝게 만들어 대비를 유지한 채 색만 입힙니다. hard-light는 판정 기준이 위 레이어라 훨씬 강하게, soft-light는 훨씬 부드럽게 나옵니다.
<!-- Contrast-preserving tint: shadows stay dark, highlights stay bright -->
<div class="bbmo bg38BDF8 bsc bgrn bgpc h30rem br8px"></div>
<!-- Softer version of the same idea -->
<div class="bbmsl bg38BDF8 bsc bgrn bgpc h30rem br8px"></div>bbmdbbmlbbmcdbbmcbdarken / lighten / color-dodge / color-burn
두 레이어를 채널별로 비교해 더 어두운 값(darken) 또는 더 밝은 값(lighten)만 남깁니다. color-dodge와 color-burn은 아래 레이어의 밝기를 극단적으로 밀어 올리거나 눌러 강한 하이라이트와 그림자를 만듭니다.
<!-- Cap the brightness of a noisy texture -->
<div class="bbmd bg27272A bsc bgrn h20rem br8px"></div>
<!-- Keep only the bright parts of the texture -->
<div class="bbml bg27272A bsc bgrn h20rem br8px"></div>bbmdfbbmedifference / exclusion
두 색의 차이를 계산합니다. 겹치는 색이 밝을수록 반전이 강해져 네온 포스터 같은 결과가 나옵니다. exclusion은 같은 원리지만 중간 톤이 회색으로 수렴해 대비가 낮습니다.
<!-- Poster-style inversion effect -->
<div class="bbmdf bgFACC15 bsc bgrn bgpc h30rem br8px"></div>bbmhbbmsabbmcobbmluhue / saturation / color / luminosity
색의 구성 요소만 골라 섞습니다. 아래 레이어에서 명도를, 위 레이어에서 색상을 가져오는 bbmco 조합이 듀오톤 이미지의 표준 레시피입니다.
<!-- Recolor a photo while keeping its shading -->
<div class="bbmco bg6366F1 bsc bgrn bgpc h30rem br8px"></div>
<!-- Duotone: keep the color, take the lightness from the image -->
<div class="bbmlu bg6366F1 bsc bgrn bgpc h30rem br8px"></div>실전 예시
블렌드 모드는 레이어가 둘 이상일 때만 의미가 있습니다. 배경 이미지와 배경색을 함께 지정하세요.
<!-- Background color + image multiply blend -->
<div class="bbmm bg6366F1 bsc bgrn bgpc h30rem">
Dark tone overlay effect
</div>
<!-- Screen blend — bright effect -->
<div class="bbms bg000000 bsc bgrn bgpc h30rem">
Bright tone overlay effect
</div>실제로는 카테고리별 색을 사진에 입혀 제각각인 썸네일을 하나의 그리드로 묶는 데 많이 씁니다.
<!-- Article card: cover image tinted to match the category color,
so a mixed set of thumbnails still reads as one grid -->
<article class="pr oh br12px b1pxsolid27272A">
<div class="bbmm bg6366F1 bsc bgpc bgrn h20rem"></div>
<div class="p2rem">
<span class="fs12px ttu ls0-05em c38BDF8 fw600">Engineering</span>
<h3 class="fs2rem fw700 cFAFAFA mt8px">Shipping CSS without a build step</h3>
</div>
</article>팁 / 주의사항
레이어가 하나면 아무 일도 일어나지 않습니다
배경 이미지만 있고 배경색이 없거나, 배경색만 있고 이미지가 없으면 섞을 상대가 없어 블렌드 모드는 무시됩니다. 반드시 이미지 + 색 또는 이미지 여러 장을 함께 지정하세요.
background 단축 속성이 배경색을 지워버립니다
그라데이션 클래스는 background 단축 속성으로 컴파일되므로, 나중에 적용되면 배경색을 초기화합니다. 색 클래스를 뒤에 두거나 순서를 확인하세요.
background-blend-mode와 mix-blend-mode는 다릅니다
background-blend-mode는 한 요소 안의 배경 레이어끼리만 섞습니다. 요소 전체를 아래 요소와 섞으려면 mix-blend-mode를 써야 합니다. 텍스트나 자식 요소는 영향을 받지 않습니다.
명암 대비가 무너질 수 있습니다
multiply나 difference는 배경 밝기를 크게 바꿔 그 위의 텍스트 가독성을 떨어뜨립니다. 블렌드 결과를 눈으로 확인하고 필요하면 텍스트 색을 다시 잡으세요.