CSS background-blend-mode 속성

정의 및 사용법

background-blend-mode 속성은 각 배경 레이어(색과/또는 이미지)의 빛내림 모드를 정의합니다.

추가로 참조하십시오:

CSS 강의:CSS 배경

예제

배경 이미지의 빛내림 모드를 "빛내림"으로 설정합니다:

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: 빛내림;
}

본인이 직접 시도해 보세요

페이지 끝에서 더 많은 TIY 예제를 볼 수 있습니다.

CSS 문법

background-blend-mode: 일반|かけ算|스크린|오버레이|黯淡|빛내림|색 조정|사饱和|색|빛;

속성 값

값 설명
normal 기본 설정. 빛내림 모드를 일반으로 설정합니다.
かけ算 かけ算 모드를 설정합니다.
스크린 스크린 모드를 설정합니다.
오버레이 오버레이 모드를 설정합니다.
黯淡 오버레이 모드를 설정합니다.
빛내림 빛내림 모드를 설정합니다.
color-dodge 믹스 모드를 color-dodge(颜色减淡)으로 설정하세요.
saturation 믹스 모드를 saturation(饱和度)으로 설정하세요.
color 믹스 모드를 color(颜色)으로 설정하세요.
luminosity 믹스 모드를 luminosity(亮度)로 설정하세요.

기술 세부 사항

기본 값: normal
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조하십시오:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.backgroundBlendMode="screen"

더 많은 예제

예제

믹스 모드를 "multiply"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "screen"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "overlay"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "darken"으로 지정하세요:

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;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "saturation"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "color"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "luminosity"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

본인이 직접 시도해 보세요

예제

믹스 모드를 "normal"으로 지정하세요:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

본인이 직접 시도해 보세요

브라우저 지원

표에서의 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 기재했습니다.

Chrome Edge Firefox 사파리 오퍼라
Chrome Edge Firefox 사파리 오퍼라
35.0 79.0 30.0 7.1 22.0