혼합(blend)

소개

블랜드는 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법입니다.

background-blend-mode

배경 그래픽 간의 블랜드 효과

예제 - blend_1.html

<!doctype html>
<html>
  <head>
    <style>
      .blend{
        height:400px;
        border:5px solid;
        background-color: rgba(255,0,0,0.5);
        background-size:cover;
        background-image:url('sample.mt.jpg');
        background-blend-mode: saturation;
        transition:background-color 10s;
      }
      .blend:hover{
        background-color: rgba(255,0,0,1);
        transition:background-color 5s;
      }
    </style>
  </head>
  <body>
    <div class="blend">
      
    </div>
  </body>
</html>

mix-blend-mode

컨텐트와 배경 사이의 블랜드 효과

예제 - blend_2.html

<!doctype html>
<html>
  <head>
    <style>
      body{
        background-image: url(sample.mt.jpg);
      }
      .blend{
        font-size:2rem;
        font-weight: bold;
        color:red;
        mix-blend-mode:screen;
      }
    </style>
  </head>
  <body>
    <div class="blend">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, maiores!</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam quibusdam cupiditate, necessitatibus ratione illum asperiores sint voluptate vel ex esse vero culpa. Totam aliquam minus eum sequi commodi vitae numquam officia placeat repellat, alias dignissimos. Commodi optio ipsam illum culpa voluptatum, obcaecati veritatis rem similique molestiae fugit autem, animi.
    </div>
  </body>
</html>