Properties

Properties

Draft
  • account_tree
  • bug_report

background-blend-mode

복수의 배경이 설정되어 겹쳐진 경우 혼합 방식을 설정할 수 있다.

설정 가능한 속성 값

  • normal기본값키워드CSS3

    혼합 모드를 적용하지 않는다.

  • multiply키워드CSS3

    겹치는 복수의 배경 설정 색상이 서로 곱해지는 연산으로 혼합 처리한다. 상대적으로 어두운 배경으로 혼합 처리된다.

  • screen키워드CSS3

    혼합되는 배경 설정 색이 반전되어 곱해진 후 다시 반전된다. multiply와 반대의 결과를 보이며 더 밟은 혼합으로 처리한다.

  • overlay키워드CSS3

    multiply와 screen을 혼합한 결과를 만든다. 아래쪽 배경이 밝을 때에는 위쪽 배경은 더 밝아지고, 아래쪽 배경이 어두울 때는 위쪽 배경은 더 어두워지는 결과를 만든다.

  • darken키워드CSS3

    아래쪽 배경과 위쪽 배경의 검정색을 더 강조하여 혼합한다.

  • lighten키워드CSS3

    아래쪽 배경과 위쪽 배경의 밝은 부분을 더 강조하여 혼합한다.

  • color-dodge키워드CSS3

    위쪽의 배경을 밟게 처리하며 전체적으로 결과물의 명도가 높아지는 혼합 방식이다.

  • saturation키워드CSS3

    아래쪽 배경의 채도와 명도를 사용하고 위쪽 배경의 채도를 사용해 혼합한다.

  • color키워드CSS3

    아래쪽 배경의 명도를 사용하고 위쪽 배경의 색상과 채도를 사용해 혼합한다.

  • luminosity키워드CSS3

    아래쪽 배경의 채도와 색상을 추출해 내고 위쪽 배경의 명도를 추출해 혼합한다. 명도 위주로 혼합한다.

구문

  • background-blend-mode normal;기본값CSS3

    기본 값으로 혼합 모드 없이 위쪽에 있는 배경 설정으로 최종 처리된다.

  • background-blend-mode multiply or screen or overlay or darken or lighten or color-dodge or saturation or color or luminosity;기본형식CSS3

    주어진 상수로 혼합 모드를 설정할 수 있다.

테스트 도구

두개 이상의 배경이 설정된 경우 다양한 혼합 모드를 적용하여 효과를 만들어 낸다.

지원 웹브라우저