CSS 믹스 블렌드 모드 속성

정의와 사용법

mix-blend-mode 속성은 요소의 내용이 직접 부모 배경과 어떻게 혼합되는지 정의합니다。

또한 참고할 것:

CSS 참조 설명서：CSS background-blend-mode 속성

예제

빨간 배경을 가진 컨테이너 및 이 빨간 컨테이너와 혼합된 이미지(어둡게):

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

직접 시험해 보세요

页面下方可以找到更多 TIY 예제。

CSS 문법

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

속성 값

값 설명
normal 이는 기본 값입니다. 혼합 모드를 일반으로 설정합니다。
multiply 혼합 모드를 multiply로 설정합니다。
screen 혼합 모드를 screen로 설정합니다。
overlay 혼합 모드를 overlay로 설정합니다。
darken 혼합 모드를 darken로 설정합니다。
lighten 혼합 모드를 lighten로 설정합니다。
color-dodge 혼합 모드를 color-dodge로 설정합니다。
color-burn 혼합 모드를 color-burn로 설정합니다。
difference 혼합 모드를 difference로 설정합니다。
exclusion 혼합 모드를 exclusion로 설정합니다。
hue 혼합 모드를 hue로 설정합니다。
saturation 혼합 모드를 saturation으로 설정합니다。
color 혼합 모드를 color로 설정합니다。
luminosity 혼합 모드를 luminosity로 설정합니다。

기술 세부 사항

기본 값: normal
thừa kế: 아니요
애니메이션 제작: 지원되지 않습니다. 참고할 것:애니메이션 관련 속성。
JavaScript 문법： object.style.mixBlendMode = "darken"

更多 예제

예제

모든 값을 보여줍니다：

.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;}

직접 시험해 보세요

예제

mix-blend-mode를 사용하여 반응형 cutout/knockout 텍스트(캐츄어 텍스트)를 생성하세요:

.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;
}

직접 시험해 보세요

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 기재했습니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
41.0 79.0 32.0 8.0 35.0