background-blend-mode
background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
백그라운드 색상과 백그라운드 이미지를 혼합 했을 때 효과를 만들어 주기 때문에, 두가지 요소가 없다면, 적용이 안 될 수 있습니다.
포토샵의 브랜드 효과와 동일하다고 보시면 됩니다.
background-blend-mode
background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
특징 | 설명 |
---|---|
기본 값 | background-blend-mode : normal; |
적용 | background |
버전 | CSS1 |
사용성 | ★★★☆☆ |
정의(Definition)
- background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
- blend-mode는 크게 background-blend-mode와 mix-blend-mode로 설정됩니다.
- 포토샵의 브렌드 모드와 동일한 효과입니다.
백그라운드와 관련된 속성(Background Related Properties)
- background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
- background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
- background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
- background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-color 속성은 백그라운드 색을 설정합니다.
- background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
- background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
- background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
- background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
그래픽 효과와 관련된 속성(Graphic Related Properties)
- filter 속성은 그래픽 효과를 설정합니다.
- backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.
- background-blend-mode 속성은 배경을 혼합했을 때 그래픽 효과를 설정합니다.
- mix-blend-mode 속성은 요소를 혼합했을 때 그래픽 효과를 설정합니다.
문법(Syntax)
background-blend-mode : normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
/* 기본 속성 */
background-blend-mode : normal;
background-blend-mode : multiply;
background-blend-mode : screen;
background-blend-mode : overlay;
background-blend-mode : darken;
background-blend-mode : lighten;
background-blend-mode : color-dodge;
background-blend-mode : color-burn;
background-blend-mode : hard-light;
background-blend-mode : soft-light;
background-blend-mode : difference;
background-blend-mode : exclusion;
background-blend-mode : hue;
background-blend-mode : saturation;
background-blend-mode : color;
background-blend-mode : luminosity;
/* 다중 속성 */
background-blend-mode : color-dodge, exclusion;
background-blend-mode : color-dodge, hue;
예제1(Sample)
배경색과 백그라운드 이미지를 혼합했을 때 예제입니다.
background-blend-mode
background-blend-mode : normal;
background-blend-mode : multiply;
background-blend-mode : screen;
background-blend-mode : overlay;
background-blend-mode : darken;
background-blend-mode : lighten;
background-blend-mode : color-dodge;
background-blend-mode : color-burn;
background-blend-mode : hard-light;
background-blend-mode : soft-light;
background-blend-mode : difference;
background-blend-mode : exclusion;
background-blend-mode : hue;
background-blend-mode : saturation;
background-blend-mode : color;
background-blend-mode : luminosity;
HTML
CSS
SCRIPT
<div class="background-box">
<div class="box">
<h2>background-blend-mode</h2>
</div>
</div>
.background-box .box {
background-image: url(https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: #4390E1;
background-size: cover;
overflow-y: scroll;
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.background-box .box h2 {
text-transform: uppercase;
padding: 10% 0;
}
//Javascript none
속성(Property)
속성값 | 설명 |
---|---|
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으로 정의합니다. |
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
background-blend-mode | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |