CSS의 background-blend-mode 속성을 사용하면 여러 개의 배경 레이어 각각에 대해 혼합 모드(blend mode)를 지정할 수 있습니다. 이 속성은 하나의 요소에 두 개 이상의 배경 이미지가 적용되어 있을 때 특히 유용하며, 레이어들이 서로 겹쳐질 때 어떤 방식으로 섞여 보일지를 결정합니다.
주요 혼합 모드 값
- normal – 기본값으로, 혼합 없이 일반적인 방식으로 표시됩니다.
- multiply – 색상을 곱하여 더 어두운 결과를 만듭니다.
- screen – 색상을 반전해 곱한 후 다시 반전하여 더 밝은 결과를 만듭니다.
- darken – 두 레이어 중 더 어두운 색상을 선택합니다.
- lighten – 두 레이어 중 더 밝은 색상을 선택합니다.
- 그 외에도 overlay, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity 등의 값을 사용할 수 있습니다.
예제 코드
다음 예제에서는 두 개의 배경 이미지를 사용하고, 혼합 모드를 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>
코드 설명
위 코드에서 #myDIV 요소에는 두 개의 배경 이미지가 지정되어 있습니다. 첫 번째 이미지는 no-repeat 옵션으로 한 번만 표시되고, 두 번째 이미지는 repeat 옵션으로 화면 전체에 반복됩니다. background-blend-mode: darken; 구문은 두 배경 레이어가 겹치는 부분에서 더 어두운 색상이 드러나도록 합니다.
레이어마다 서로 다른 혼합 모드를 적용하고 싶다면 값을 쉼표로 구분하여 나열하면 됩니다. 예를 들어 background-blend-mode: darken, screen;과 같이 작성하면 첫 번째 레이어에는 darken, 두 번째 레이어에는 screen 모드가 순서대로 적용됩니다.