CSS background-blend-mode 속성

CSS background-blend-mode 속성은 각 배경 레이어의 혼합 모드를 정의합니다. 배경 이미지를 다른 이미지 또는 배경색과 혼합할 수 있습니다. 이것은 CSS3 속성입니다.

이 속성은 요소 혼합에 사용됩니다. 총 10개의 값이 있습니다. 기본값은 정상입니다. 배경 레이어가 여러 개이고 지정된 블렌드 모드 목록이 있는 경우 이 속성은 background-image와 동일한 순서로 적용될 수 있습니다.

background-blend-mode 등록 정보는 다음 값을 허용합니다.

노멀

곱하기

스크린

오버레이

어둡게

가볍게 하다

컬러닷지

채도

칼라

광도

Background-blend-mode 속성의 특성:

| 초기값 | 정상 |
| 적용 | 모든 요소. ::first-letter 및 ::first-line에도 적용됩니다. |
| 상속 | 아니요 |
| 애니메이션 가능 | 아니요 |
| 버전 | CSS3 |
| 자바스크립트 구문 | object.style.backgroundBlendMode = "luminosity"; |

통사론:


background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

값:

값
설명

정상
이 속성은 혼합 모드를 일반으로 설정합니다.

곱하다

혼합 모드를 곱하기로 설정합니다.

화면
혼합 모드를 화면으로 설정합니다.

위에 까는 것
혼합 모드를 오버레이로 설정할 수 있습니다.

어둡게 하다

혼합 모드를 어둡게 설정합니다.

가볍게 하다
이 속성은 혼합 모드를 밝게 설정합니다.

컬러 닷지
혼합 모드를 색상 닷지로 설정합니다.

포화

혼합 모드를 채도로 설정합니다.

색깔
혼합 모드를 색상으로 설정할 수 있습니다.

밝기

혼합 모드를 광도로 설정합니다.

Background-blend-mode 속성의 예:

이 예제 코드는 background-blend-mode 속성을 사용합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: normal;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같이 출력됩니다.

background-blend-mode 속성

"screen" 값이 있는 background-blend-mode 속성의 예:

다음 예에서는 배경 이미지가 혼합되는 방식을 볼 수 있습니다. 코드를 적용하고 실행합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: screen;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같은 결과를 얻을 수 있습니다.

화면 값이 있는 배경 혼합 모드

"color-dodge" 값이 있는 Background-blend-mode 속성의 예:

여기에서 color-dodge 값과 함께 background-blend-mode 속성을 사용하는 또 다른 코드를 제시합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: color-dodge;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같은 결과를 얻을 수 있습니다.

색상 닷지가 있는 배경 혼합 모드

"곱하기" 값이 있는 배경 혼합 모드의 예:

다음 코드는 곱하기 값과 함께 background-blend-mode를 사용합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: multiply;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같은 출력을 얻을 수 있습니다.

곱하기가 있는 배경 혼합 모드

"overlay" 값이 있는 Background-blend-mode 속성의 예:

다음 코드에서는 오버레이 값과 함께 background-blend-mode 속성을 사용했습니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: overlay;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 스크린샷과 같은 출력이 표시됩니다.

오버레이가 있는 배경 혼합 모드 속성

"darken" 값이 있는 Background-blend-mode 속성의 예:

이 예제 코드는 background-blend-mode 속성을 darken 값과 함께 사용했습니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: darken;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같은 결과를 얻을 수 있습니다.

어둡게 값이 있는 배경 혼합 모드

"채도" 값이 있는 배경 혼합 모드 속성의 예:

다음 코드에서 background-blend-mode 속성에 채도 값이 있는 것을 확인할 수 있습니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 400px;

        height: 400px;

        background-repeat: no-repeat, repeat;

        background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-blend-mode: saturation;

        background-size: 280px;

        background-position: center;

      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>