[background] CSS - background-blend-mode 속성 - 해당요소 각 (배경색/배경미미지)층의 혼합방식 지정 (= background-blend-mode속성 = 백그라운드블렌드모드속성)

1. background-blend-mode 예제 - 배경이미지를 lighten모드로 혼합
2. background-blend-mode 정의
3. background-blend-mode 구문

background-blend-mode 예제 - 배경이미지를 lighten모드로 혼합

 

<style>

#hz { 

  width: 400px;

  height: 400px;

  background-repeat: no-repeat, repeat;

  background-image: url("https://source.unsplash.com/random"), url("https://picsum.photos/600/600/?random");

  background-blend-mode: lighten;

}

</style>

<div id="hz"></div>

 

결과보기

background-blend-mode 정의

 

해당요소 각 (배경색/배경이미지)층의 혼합방식 지정.

 

---

 

1. cf.

mix-blend-mode 속성 - 해당요소의 부모요소 배경색과의 '결합/혼합' 방법 지정.

 

2.

• 기본값: normal
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.backgroundBlendMode="screen";

 

3.

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

 

4. MDN background-blend-mode 예제보기

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

 

background-blend-mode 구문

 

selector {

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: 부모요소의 속성값 상속.

  

PS. 속성값을 콤마(,)로 구분해 2개 나열 가능하며, 순서대로 각각의 (배경색/배경이미지)에 적용됨. (예) background-blend-mode: darken, luminosity;