CSS

혼합(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>

 

참고

아직 CSS에서 블랜드는 최신 기능이기 때문에 CSS 블랜드로 할 수 있는 일에 대한 논의가 풍부하지 않습니다. 포토샵 블랜드로 검색해보면 다양한 사례를 찾아볼 수 있을 것입니다. 

포토샵 블랜드 검색

또 codepen.io를 통해서도 블랜드를 활용한 사례를 볼 수 있습니다. 

codepen.io 블랜드 예제

블랜드는 최신 기능이기 때문에 일부 브라우저에서는 동작하지 않을 수 있습니다. 이에 대한 통계는 caniuse를 참고해주세요. 

caniuse background-blend-mode 통계보기

댓글

댓글 본문
작성자
비밀번호
  1. 푸른하늘
    11일차 공부 감사합니다
  2. 오빠는다르다
    감사합니다~!!!!!!
  3. 우리
    노래 진짜 좋네요 ~~~~
  4. 오들오들오드리
    노래 가사가 좋아요~
  5. 세븐나이츠
    이고잉님 존경합니다
  6. lobster
    mozilla(firefox)에서는 잘 동작하는데 chrome은 안되네요. 아래분도 확인 하신듯요
  7. 감사^^ㅎㅎ
    노래 너무 좋아요^^
  8. php가 첫취업?
    깜짝 이벤트 감사합니다..
  9. programmer very GOSU
    노래 감사합니다
    잠깐이나마 휴식을 취할 수 있어 좋았습니다
  10. ㅁㄷㅁ
    현재 크롬57에서 mix-blend-mode가 작동하지 않습니다.
    버그 리포트를 확인해보니 작동 안하는걸 인지하고 있고,
    mix-blend-mode 보안 취약점 때문에 브라우저 히스토리가 노출된다고 합니다.
  11. bigmoon
    노래 참 예쁩니다 감사합니다
  12. fallback
    Can I Use 사이트에서는 mix-blend-mode를 크롬 57에서 지원된다고 되어 있는데, 동작하지 않습니다. 저만 그런가요?
  13. funlife
    강의 감사합니다.

    좋은 노래도 듣고 갑니다.
  14. 광뀨
    마음이 편안해지네요
  15. 감사합니다.
    노래 듣고 마음이 정화 된거 같습니다.ㅎㅎ
  16. 폭스킴
    뜻밖에 아름다운 동요로 마음이 깨끗해졌습니다. ^^
  17. 임지호
    blend : 이미지와 이미지를 혼합하는 기능
    - background-blend-mode : 배경과 배경(이미지, 색깔 등)을 혼합
    * rgba(a는 투명도 0~1 지정), hover등과 조합 가능
    - mix-blend-mode : 컨텐트와 배경을 혼합

    나솔님 노래 잘하시네요! 노래에 있어서 까다로운 편인데 뭔가 힐링되는 느낌이 들고 전체적으로 좋네요!!
  18. bigFanU
    이고잉님은 분명 영혼이 맑고 따뜻한 사람일것이다...감사해요
  19. 동요
    ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아 동요 좋네요
    근데 가사중에 다음생에 만나자 라는말이 뭔가 그렇군요;
  20. 멍뭉이제씨
    강의 잘 보고 노래도 잘 들었습니다
  21. 노래너무좋아요~!!친구들에게보냈어용 ㅎㅎ
  22. 이성용
    깜짝 이벤트 감사합니다. 마음이 정화되는것 같습니다^^
  23. twitlingua@gmail.com
    오호호 고맙습니다 ^^

    - 나솔
    대화보기
    • 마엘
      언제나 강의 잘 듣고있습니다. 블렌드 모드 신세계네요! 노래도 서정적이고 좋아요 ㅎㅎ
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기