CSS mix-blend-mode 속성이란?
mix-blend-mode 속성은 요소의 콘텐츠가 직계 부모 요소의 배경과 어떤 방식으로 혼합(blending)될지를 지정하는 CSS 속성입니다. 이미지와 텍스트를 배경색에 자연스럽게 녹여내거나, 포토샵의 레이어 혼합 모드처럼 시각적인 효과를 웹에서 그대로 구현할 수 있어 디자인 표현력을 크게 높여 줍니다.
속성 문법
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
주요 속성값 설명
- normal – 기본값으로, 별도의 혼합 없이 원본 그대로 표시합니다.
- multiply – 색상을 곱한 결과로 혼합하여 전체적으로 어두운 톤이 됩니다.
- screen – multiply의 반대로, 밝고 부드러운 톤으로 혼합됩니다.
- overlay – multiply와 screen을 조합해 대비가 강조된 효과를 냅니다.
- darken / lighten – 두 색상 중 각각 더 어두운 색 또는 더 밝은 색을 선택합니다.
- color-dodge / color-burn – 배경색을 밝게 밝히거나(dodge), 어둡게 태우듯(burn) 처리합니다.
- difference / exclusion – 색상의 차이를 이용한 반전 효과를 만들며, exclusion은 difference보다 대비가 낮습니다.
- hue / saturation / color / luminosity – 색조, 채도, 색상, 명도 성분만 가져와 혼합합니다.
예제 1 – normal, darken, lighten, hue 적용하기
같은 이미지에 서로 다른 혼합 모드를 적용해 결과를 비교해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
height: 800px;
background-color: brown;
}
img {
width: 33.3%;
height: auto;
float: left;
}
.demo1 {
mix-blend-mode: normal;
}
.demo2 {
mix-blend-mode: darken;
}
.demo3 {
mix-blend-mode: lighten;
}
.demo4 {
mix-blend-mode: hue;
}
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>참고:</strong> mix-blend-mode 속성은 Internet Explorer에서는 지원되지 않습니다.</p>
</body>
</html>실행 결과
예제 2 – color-dodge, color-burn, exclusion, saturation 적용하기
이번에는 좀 더 강렬한 효과를 내는 혼합 모드들을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
height: 800px;
background-color: brown;
}
img {
width: 33.3%;
height: auto;
float: left;
}
.demo1 {
mix-blend-mode: color-dodge;
}
.demo2 {
mix-blend-mode: color-burn;
}
.demo3 {
mix-blend-mode: exclusion;
}
.demo4 {
mix-blend-mode: saturation;
}
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>참고:</strong> mix-blend-mode 속성은 Internet Explorer에서는 지원되지 않습니다.</p>
</body>
</html>실행 결과
브라우저 호환성 참고 사항
mix-blend-mode 속성은 Chrome, Firefox, Safari 및 Chromium 기반의 최신 Edge 등 주요 최신 브라우저에서 잘 지원됩니다. 다만 구형 Internet Explorer에서는 지원되지 않으므로, IE를 지원해야 하는 프로젝트라면 폴백(fallback) 스타일을 함께 준비하는 것이 좋습니다.