CSS 혼합 혼합 모드 속성

예시

빨간색 배경이 있는 컨테이너 및 빨간색 컨테이너와 혼합된 이미지(어두움):

.container {
background-color: red;
}

.container img {
mix-blend-mode: darken;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

mix-blend-mode속성은 요소의 콘텐츠가 직접 상위 배경과 혼합되는 방법을 지정합니다 .

기본값:	정상
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
자바스크립트 구문:	개체 .style.mixBlendMode = "어둡게"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
mix-blend-mode	41.0	79.0	32.0	8.0	35.0

CSS 구문

속성 값

Value	Description
normal	This is default. Sets the blending mode to normal
multiply	Sets the blending mode to multiply
screen	Sets the blending mode to screen
overlay	Sets the blending mode to overlay
darken	Sets the blending mode to darken
lighten	Sets the blending mode to lighten
color-dodge	Sets the blending mode to color-dodge
color-burn	Sets the blending mode to color-burn
difference	Sets the blending mode to difference
exclusion	Sets the blending mode to exclusion
hue	Sets the blending mode to hue
saturation	Sets the blending mode to saturation
color	Sets the blending mode to color
luminosity	Sets the blending mode to luminosity

더 많은 예

예시

모든 가치의 시연:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

예시

혼합 혼합 모드를 사용하여 반응형 컷아웃/녹아웃 텍스트 만들기:

.image-container {
background-image: url("paris.jpg");
background-size: cover;
position: relative;
height: 300px;
}

.text {
background-color: white;
color: black;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}

CSS 참조

CSS Properties