mix-blend-mode

mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.

구문

/* 키워드 값 */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* 전역 값 */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

<blend-mode>
적용할 혼합 모드.

형식 구문

<blend-mode>

where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

예제

HTML 예제

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}

SVG 예제

다음은 이전의 예제를 SVG로 구현한 것입니다.

<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red"/>
    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
    <circle cx="60" cy="80" r="40" fill="blue"/>
  </g>
</svg>
circle { mix-blend-mode: screen; }  
.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */

명세

Specification Status Comment
Compositing and Blending Level 1
The definition of 'mix-blend-mode' in that specification.
Candidate Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mix-blend-modeChrome Full support 41Edge Full support 79Firefox Full support 32IE No support NoOpera Full support 28Safari Full support 8WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 32Opera Android Full support 28Safari iOS Full support 8Samsung Internet Android Full support 4.0
On SVG elementsChrome Full support 41Edge Full support 79Firefox Full support 32IE No support NoOpera Full support 28Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 32Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

같이 보기