예
블렌딩 모드를 지정합니다 :
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
배경 - 혼합 모드 속성은 각각의 배경 레이어의 혼합 모드 정의 (color and/or image) .
기본값: | normal |
---|---|
상속 : | no |
애니메이션 : | no. Read about animatable |
번역: | CSS3 |
자바 스크립트 구문 : | object .style.backgroundBlendMode="screen" |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
재산 | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 지원되지 않음 | 30.0 | 7.1 | 22.0 |
CSS 구문
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
속성 값
값 | 기술 | 플레이 |
---|---|---|
normal | 이 기본값입니다. 정상으로 혼합 모드를 설정합니다 | »플레이 |
multiply | 곱 혼합 모드를 설정합니다 | »플레이 |
screen | 화면에 혼합 모드를 설정합니다 | »플레이 |
overlay | 오버레이 혼합 모드를 설정합니다 | »플레이 |
darken | 어둡게 혼합 모드를 설정합니다 | »플레이 |
lighten | 밝게 혼합 모드를 설정합니다 | »플레이 |
color-dodge | 색상 회피에 혼합 모드를 설정합니다 | »플레이 |
saturation | 포화 혼합 모드를 설정합니다 | »플레이 |
color | 색상으로 혼합 모드를 설정합니다 | »플레이 |
luminosity | 광도에 혼합 모드를 설정합니다 | »플레이 |
관련 페이지
CSS 자습서 : CSS 배경