CSS3 mix-blend-mode

mix-blend-mode

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

포토샵을 사용하지 않고 CSS코드만으로 image의 컬러 블렌딩이 가능하다.

 

 

Syntax

/* 키워드 값 */
.keyword{
  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;
}

/* 전역 값 */
.style{
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

 

 

 

 

 

참고:)

https://developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode

mix-blend-mode - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/ko/docs/Web/CSS/blend-mode

<blend-mode> - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode