mix-blend-mode 속성

mix-blend-mode 속성은 원본 색상을 배경색이나 배경 이미지 위에 혼합하는 방식을 지정합니다. 속성 값은 주요 그래픽 편집기 프로그램의 혼합 모드와 유사합니다.

구문

선택자 {
	mix-blend-mode: 값;
}

다음 표는 mix-blend-mode 속성의 주요 값을 보여줍니다:

값	설명
`normal`	일반. 색상 혼합을 사용하지 않습니다. 기본값입니다.
`multiply`	곱하기. 이 모드에서 기본 색상 값은 혼합 색상 값과 곱해집니다. 결과 색상은 항상 더 어두운 색상입니다.
`screen`	스크린. 이 모드에서 기본 색상과 혼합 색상의 반전 값이 서로 곱해집니다. 결과 색상은 항상 더 밝은 색상이 됩니다.
`overlay`	오버레이. 이 모드에서는 색상이 기본 색상에 따라 곱해지거나 스크린 처리됩니다. 패턴이나 색상이 기존 픽셀을 덮으면서 기본 색상의 밝은 부분과 어두운 부분은 변경하지 않고 유지합니다.

mix-blend-mode 속성의 기본값을 적용한 이미지가 어떻게 보이는지 확인해 봅시다:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

이제 혼합 모드를 곱하기로 변경해 보겠습니다:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

mix-blend-mode 속성에 오버레이 값을 지정해 보겠습니다:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}