목차
- background-blend-mode 예제 - 배경이미지를 lighten모드로 혼합
- background-blend-mode 정의
- 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;
