background-blend-mode 속성

background-blend-mode 속성은 배경 이미지가 배경 색상이나 다른 이미지에 혼합되는 방식을 설정합니다. 이 속성에는 쉼표로 구분된 여러 값을 지정할 수도 있으며, 이 값들은 동일한 순서로 적용됩니다. 속성 값은 그래픽 편집기의 주요 혼합 모드와 유사합니다.

문법

선택자 {
	background-blend-mode: 모드들;
}

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

값

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

예제

background-blend-mode 속성의 기본값으로 이미지가 어떻게 표시되는지 살펴보겠습니다:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이제 background-blend-mode 속성 값을 곱하기(multiply)로 변경해 보겠습니다:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이미지에 스크린(screen) 모드를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

같이 보기

배경에 대한 단축 속성인 background 속성
블록에 배경 이미지를 설정하는 데 사용하는 background-image 속성
원본 색상을 배경 이미지에 혼합하는 데 사용하는 mix-blend-mode 속성
필터를 적용할 수 있게 해주는 backdrop-filter 속성