목차
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;
