[background] CSS - mix-blend-mode 속성 = 해당요소의 부모요소 배경색과의 '결합/혼합' 방법 지정 (= mix-blend-mode속성 = 믹스블렌드모드속성) ※ 종이 오려낸 텍스트 글자 효과

1. mix-blend-mode 예제 - screen 속성값 경우
2. mix-blend-mode 정의
3. mix-blend-mode 구문
4. mix-blend-mode 예제 - 속성값별 효과 차이
5. mix-blend-mode 예제 - 반응형 컷아웃(cutout) 텍스트 효과

mix-blend-mode 예제 - screen 속성값 경우

(예) screen 속성값 경우, 두 색을 반전시키고 곱하여 더 밝은색 사용.

 

<style>

.box {

  background-color: red;

  padding: 15px;

}

.box img {

  mix-blend-mode: screen;

}

</style>

<div class="box">

  <img src="https://source.unsplash.com/random" alt="랜덤이미지" width="300" height="auto">

</div>

 

<img src="https://source.unsplash.com/random" alt="랜덤이미지" width="300" height="auto">

 

결과보기

mix-blend-mode 정의

 

요소의 콘텐츠가 직접 상위 배경과 어떻게 혼합되어야 하는지를 지정.

 

---

 

1. cf.

background-blend-mode 속성 - 해당요소 각 (배경색/배경이미지)층의 혼합방식 지정.

 

2.

• 기본값: normal
• 상속여부: X
• 애니가능: X
• JS구문: object.style.mixBlendMode = "darken";

 

3.

IE 제외한 주요 최신브라우저 모두 지원.

 

4. MDN mix-blend-mode 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

 

mix-blend-mode 구문

 

selector {mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity|initial|inherit;}

 

---

[속성값]

 

• normal:  요소를 혼합 X (기본값)
• multiply: 두 색을 곱하여 더 어두운색 생성.
• screen: 두 색을 반전시키고 곱하여 더 밝은색 적용.
• overlay: 주어진 조건에 따라 multiply 또는 screen을 선택하여 혼합.
• darken: 두 색 중 더 어두운 색을 선택.
• lighten: 두 색 중 더 밝은 색을 선택.
• color-dodge: 두 색을 더 밝게 생성.
• color-burn: 두 색을 더 어둡게 생성.
• hard-light: 주어진 조건에 따라 multiply 또는 screen을 선택하여 혼합.
• soft-light: 주어진 조건에 따라 darken 또는 lighten을 선택하여 혼합.
• difference: 두 색의 차이를 사용하여 새로운 색을 생성.
• exclusion: 두 색의 차이를 사용하여 더 어두운 색을 생성.
• hue: 픽셀의 색조를 사용하여 두 색을 혼합.
• saturation: 픽셀의 채도를 사용하여 두 색을 혼합.
• color: 픽셀의 색조와 채도를 사용하여 두 색을 혼합.
• luminosity: 픽셀의 밝기를 사용하여 두 색을 혼합.
• initial: 이 속성의 기본값으로 설정.
• inherit: 부모요소의 속성값 상속.

 

mix-blend-mode 예제 - 속성값별 효과 차이

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.box {

  background-color: red;

  height: 5000px;

}

.box img {

  width: calc(100% / 3);

  height: auto;

  float: left;

  margin-bottom:10px;

}

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

.hard-light {mix-blend-mode: hard-light;}

.soft-light {mix-blend-mode: soft-light;}    

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

</style>

<div class="box">

  <img src="https://source.unsplash.com/random" alt="이미지" class="normal">

  <img src="https://source.unsplash.com/random" alt="이미지" class="multiply">

  <img src="https://source.unsplash.com/random" alt="이미지" class="screen">

  <img src="https://source.unsplash.com/random" alt="이미지" class="overlay">

  <img src="https://source.unsplash.com/random" alt="이미지" class="darken">

  <img src="https://source.unsplash.com/random" alt="이미지" class="lighten">

  <img src="https://source.unsplash.com/random" alt="이미지" class="color-dodge">

  <img src="https://source.unsplash.com/random" alt="이미지" class="color-burn">

  <img src="https://source.unsplash.com/random" alt="이미지" class="hard-light">

  <img src="https://source.unsplash.com/random" alt="이미지" class="soft-light">   <img src="https://source.unsplash.com/random" alt="이미지" class="difference">

  <img src="https://source.unsplash.com/random" alt="이미지" class="exclusion">

  <img src="https://source.unsplash.com/random" alt="이미지" class="hue">

  <img src="https://source.unsplash.com/random" alt="이미지" class="saturation">

  <img src="https://source.unsplash.com/random" alt="이미지" class="color">

  <img src="https://source.unsplash.com/random" alt="이미지" class="luminosity">

</div>

<script>
// class 속성의 속성값과 동일값 갖는 title 속성 생성

document.addEventListener('DOMContentLoaded', function() {

  var images = document.querySelectorAll('.box img');

  images.forEach(function(image) {

    var className = image.getAttribute('class');

    image.setAttribute('title', className);

  });

});

</script>

 

결과보기

mix-blend-mode 예제 - 반응형 컷아웃(cutout) 텍스트 효과

(예) 종이 오려낸 글자 효과
 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {font-family: Arial, Helvetica, sans-serif;}

.box {

  background-image: url("https://source.unsplash.com/random");

  background-size: cover;

  position: relative;

  height: 300px;

}

.box .text {

  background-color: white;

  color: black;

  font-size: 10vw; 

  font-weight: bold;

  margin: 0 auto;

  padding: 10px;

  width: 80%;

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  opacity:0.9;

  mix-blend-mode: screen;

}

</style>

<div class="box">

  <div class="text">Homzzang.com</div>

</div>

 

결과보기