CSS 배경 혼합 모드 속성
예시
"밝게"할 배경 이미지의 혼합 모드를 지정하십시오.
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
background-blend-mode
속성은 각 배경 레이어(색상 및/또는 이미지)의 혼합 모드를 정의합니다 .
기본값: | 정상 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.backgroundBlendMode="화면" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS 구문
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
속성 값
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
더 많은 예
예시
혼합 모드를 "곱하기"로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
예시
혼합 모드를 "화면"으로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
예시
혼합 모드를 "오버레이"로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
예시
혼합 모드를 "어둡게" 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
예시
혼합 모드를 "color-dodge"로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
예시
혼합 모드를 "채도"로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
예시
혼합 모드를 "색상"으로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
예시
혼합 모드를 "광도"로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
예시
혼합 모드를 "일반"으로 지정합니다.
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
관련 페이지
CSS 튜토리얼: CSS 배경