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. 곤비
    0219
  2. 새콤달콤
    완료
  3. 덕자
    완료!
  4. DreamBoy
    2023.09.22. CSS - 그래픽 - 혼합(bland) 파트를 시작합니다.
  5. AgainstartJH
    2022년 11월 26일 토요일 학습완료!
  6. 09년생개발자
    22/3/22
  7. INJE
    22/03/18
  8. 임앤강
    2022-01-28 수강 시작합니다.
  9. 드림보이
    2021.11.16. 혼합(bland) 파트 수강완료
  10. chalieya
    강의 감사합니다. 노래도 감사합니다. ^^
  11. vogueupp
    완료
  12. choi
    완료
  13. jeisyoon
    2021.06.24 Blend - OK
  14. yogg
    ㅎㅎㅎㅎ
  15. 따뜻한츄르
    21 01 01
  16. 201219... 밑분 댓글을 보니 잼민이가 참 많다는 것도...알아갑니다...전 열심히 살아야겠네요
  17. 낑깡
    아 노래 들으니까 너무 슬프네요.. 하... 힘들다 ..앙기모띠 공부 화이팅..
  18. 콜라
    20201001완료
  19. 김성곤
    20200725 감사합니다!
  20. 김남규
    믹스 블랜드 적용됩니당
    osx.14, 크롬 최신버전.
  21. 한강
    점점 더 재미있어지네요. 오늘도 감사합니다~~^^!
    200611
  22. green diseny
    왜안돼는지 모르겠는데 나도 mix-blend-mode가 적용이안된다ㅠㅜ
  23. Dayoung
    감사합니다.
  24. ㅠㅠ
    저도 믹스블렌드 모드가 안돼요
  25. Blanc
    2020.01.06
    mix-blend-mode 적용X
  26. 없으면안돼요
    수강완료
    mix-blend-mode 적용하면 배경색이 있는 부분의 텍스트만 살짝 변하네요
  27. 힙합엄지
    mix-blend-mode가 적용이 안됩니다...
  28. 다나가
    190807 동요를 들으면서 수강완료 작성!!
  29. FIRE
    20190731 완료
  30. 박지성
    퍼거슨감독님과는 또다른 부드러운 지도력을 지녔다고 생각하기 때문에
  31. 피터
    감사합니다!
  32. lygon
    2019-03-09 완료
  33. 0125
    잘 들었습니다. ~~
  34. 숨이
    완료햇습니당
  35. 호로록
    감솨합니다!!!!!!!!!!!!!!!!!!!!!!!!!!!

    동요도 들었어요
  36. 김민영
    완료
  37. 만짱
    동요에 동요하지 마세요!
    대화보기
    • 안되안되
      안되네요.. 브라켓으로 하는데 크롬이 자동으로 주석처리해버리네요... 믹스 블렌드 모드.. 명령어 위에 빨간 바탕 생기고.. 왤까요..??
    • ㅋㅋ
      다른건 다 좋은데 동요가 마음에 안듭니다.;
    • 이한빈
      이고잉님 정말 강의 잘듣고 있습니다 항상 감사드립니다 ㅜㅜ
    • 스페이스몽키
      감사합니다! 아직 잘 안되지만 따라가겠습니다.
    • 제갈량
      이고잉님 mix-blend-mode 예제는 여기가 자세히 나와 있네요.
      참고하시면 될거 같습니다.

      https://tympanus.net......de/
    • 이고잉 사생팬
      이고잉님 정말 감사합니다!
    • 멜번리디아
      잠시 ..눈감고 듣네요. 보이지 않는 학생들에게 깜작 노래선물까지 ..감동입니다. 좋습니다!
      감사합니다.
    • bergach
      예상치못한 콘서트 크....
    • 박신우
      와... 신기하네요 blend 기술 웹디자인 정말 매력있어요
    • 푸른하늘
      11일차 공부 감사합니다
    • 오빠는다르다
      감사합니다~!!!!!!
    • 우리
      노래 진짜 좋네요 ~~~~
    • 오들오들오드리
      노래 가사가 좋아요~
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기