background-blend-mode
background-blend-mode 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다.
background-blend-mode
background-blend-mode 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다.
정의(Definition)
- background-blend-mode 속성은 배경을 혼합했을 때의 상태를 정의합니다.
- 포토샵의 브렌드 모드와 동일합니다.
문법(Syntax)
background-blend-mode : normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity
속성(Property)
| 속성값 | 설명 |
|---|---|
| normal | 배경색의 기본 값을 정의합니다. |
| multiply | 더 어두운 색으로 변경됩니다. |
| screen | 더 밝은 색으로 변경됩니다. |
| overlay | 원래 색상의 농도와 밝기를 변경합니다. |
| darken | 어두운 색으로 변경됩니다. |
| lighten | 밝은 색으로 변경됩니다. |
| color-dodge | 기본 색상을 밝게 합니다. |
| saturation | 채도의 변화로 색상이 변경됩니다. |
| color | 색을 통해 색상을 변경합니다. |
| luminosity | 밝기를 통해 색상을 변경합니다. |
호환성(Compatibility) 
더보기
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| background-blend-mode | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| normal | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| multiply | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| screen | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| overlay | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| darken | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| lighten | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| color-dodge | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| saturation | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| luminosity | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
Sample
original
multiply
screen
darken
lighten
color-dodge
saturation
color
luminosity
mix-blend-mode
original
multiply
screen
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
filter(Property)
| 속성값 | 설명 |
|---|---|
| none | 이미지의 아무런 효과를 주지 않습니다. |
| blur(px) | 이미지의 블러 효과를 설정합니다. |
| brihgtness(%) | 이미지의 밝고 어두움 정도를 설정합니다. |
| contrast(%) | 이미지의 대비를 설정합니다. |
| drop-shadow() | 이미지의 그림자를 설정합니다. |
| grayscale(%) | 이미지의 그레이스케일을 설정합니다. |
| hue-ratate(deg) | 이미지의 색조를 설정합니다. |
| invert(%) | 이미지의 반전색상을 설정합니다. |
| opacity(%) | 이미지의 투명도를 설정합니다. |
| saturate(%) | 이미지의 채도를 설정합니다. |
| sepia(%) | 이미지의 세피아 효과를 설정합니다. |
| url() | 이미지의 경로를 설정합니다. |
Sample : blur
.blur1 {filter: blur(1px);}
.blur2 {filter: blur(3px);}
.blur3 {filter: blur(5px);}
.blur4 {filter: blur(7px);}
.blur5 {filter: blur(10px);}
.blur2 {filter: blur(3px);}
.blur3 {filter: blur(5px);}
.blur4 {filter: blur(7px);}
.blur5 {filter: blur(10px);}
Sample : brightness
.bright1 {filter: brightness(10%);}
.bright2 {filter: brightness(20%);}
.bright3 {filter: brightness(30%);}
.bright4 {filter: brightness(40%);}
.bright5 {filter: brightness(50%);}
.bright2 {filter: brightness(20%);}
.bright3 {filter: brightness(30%);}
.bright4 {filter: brightness(40%);}
.bright5 {filter: brightness(50%);}
Sample : contrast
.contrast1 {filter: contrast(10%);}
.contrast2 {filter: contrast(20%);}
.contrast3 {filter: contrast(30%);}
.contrast4 {filter: contrast(40%);}
.contrast5 {filter: contrast(50%);}
.contrast2 {filter: contrast(20%);}
.contrast3 {filter: contrast(30%);}
.contrast4 {filter: contrast(40%);}
.contrast5 {filter: contrast(50%);}
Sample : grayscale
.grayscale1 {filter: grayscale(100%);}
.grayscale2 {filter: grayscale(80%);}
.grayscale3 {filter: grayscale(60%);}
.grayscale4 {filter: grayscale(40%);}
.grayscale5 {filter: grayscale(20%);}
.grayscale2 {filter: grayscale(80%);}
.grayscale3 {filter: grayscale(60%);}
.grayscale4 {filter: grayscale(40%);}
.grayscale5 {filter: grayscale(20%);}
Sample : hue-rotate
.hue1 {filter: hue-rotate(10deg);}
.hue2 {filter: hue-rotate(30deg);}
.hue3 {filter: hue-rotate(60deg);}
.hue4 {filter: hue-rotate(90deg);}
.hue5 {filter: hue-rotate(120deg);}
.hue2 {filter: hue-rotate(30deg);}
.hue3 {filter: hue-rotate(60deg);}
.hue4 {filter: hue-rotate(90deg);}
.hue5 {filter: hue-rotate(120deg);}
Sample : invert
.invert1 {filter: invert(10%);}
.invert2 {filter: invert(30%);}
.invert3 {filter: invert(60%);}
.invert4 {filter: invert(80%);}
.invert5 {filter: invert(100%);}
.invert2 {filter: invert(30%);}
.invert3 {filter: invert(60%);}
.invert4 {filter: invert(80%);}
.invert5 {filter: invert(100%);}
Sample : opacity
.opacity1 {filter: opacity(10%);}
.opacity2 {filter: opacity(30%);}
.opacity3 {filter: opacity(60%);}
.opacity4 {filter: opacity(80%);}
.opacity5 {filter: opacity(100%);}
.opacity2 {filter: opacity(30%);}
.opacity3 {filter: opacity(60%);}
.opacity4 {filter: opacity(80%);}
.opacity5 {filter: opacity(100%);}
Sample : saturate
.saturate1 {filter: saturate(10%);}
.saturate2 {filter: saturate(50%);}
.saturate3 {filter: saturate(100%);}
.saturate4 {filter: saturate(200%);}
.saturate5 {filter: saturate(400%);}
.saturate2 {filter: saturate(50%);}
.saturate3 {filter: saturate(100%);}
.saturate4 {filter: saturate(200%);}
.saturate5 {filter: saturate(400%);}
Sample : sepia
.sepia1 {filter: sepia(10%);}
.sepia2 {filter: sepia(30%);}
.sepia3 {filter: sepia(60%);}
.sepia4 {filter: sepia(90%);}
.sepia5 {filter: sepia(120%);}
.sepia2 {filter: sepia(30%);}
.sepia3 {filter: sepia(60%);}
.sepia4 {filter: sepia(90%);}
.sepia5 {filter: sepia(120%);}
