CSS 배경 혼합 모드(background-blend-mode)란?
background-blend-mode 속성은 CSS에서 요소의 각 배경 레이어가 서로 어떻게 혼합(blend)될지를 지정하는 속성입니다. 하나의 요소에 여러 개의 배경 이미지나 그라디언트를 사용할 때, 이 속성을 활용하면 포토샵의 레이어 혼합 모드처럼 시각적으로 풍부한 효과를 만들 수 있습니다.
이 속성에 지정할 수 있는 대표적인 값으로는 normal, multiply, screen, overlay, darken, lighten, color-dodge, difference 등이 있으며, 배경 이미지 위에 다른 이미지나 색상을 자연스럽게 겹치고 싶을 때 유용하게 사용됩니다.
background-blend-mode 기본 문법
background-blend-mode: darken;
여러 배경 레이어를 사용하는 경우 쉼표(,)로 구분하여 각 레이어마다 서로 다른 혼합 모드를 지정할 수도 있습니다.
예제: darken 모드 적용하기
아래 예제는 두 개의 배경 이미지를 사용하고, background-blend-mode를 darken으로 설정하여 두 이미지 중 어두운 부분이 강조되도록 구현한 코드입니다. 직접 실행해 보면 두 배경 레이어가 자연스럽게 혼합되는 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 250px;
height: 170px;
background-repeat: no-repeat, repeat;
background-image: url("https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"),
url( https://www.tutorialspoint.com/latest/dc.js.png);
background-blend-mode: darken;
}
</style>
</head>
<body>
<h1>혼합 모드 설정하기</h1>
<div id = "myDIV"></div>
</body>
</html>코드 설명
- width / height: 요소의 크기를 250px × 170px로 지정합니다.
- background-image: 쉼표로 구분하여 두 개의 배경 이미지를 동시에 적용합니다.
- background-repeat: 첫 번째 이미지는 반복 없이(no-repeat), 두 번째 이미지는 반복(repeat)하도록 설정합니다.
- background-blend-mode: darken; 두 배경 레이어를 'darken' 방식으로 혼합하여 더 어두운 색상이 표시됩니다.
마무리
background-blend-mode 속성을 활용하면 추가적인 이미지 편집 도구 없이 CSS만으로 배경 이미지를 창의적으로 합성할 수 있습니다. darken 외에도 다양한 혼합 모드 값을 조합하여 웹 페이지의 시각적 완성도를 한층 높여보세요.