생활코딩 CSS_10.3 혼합(Blend)

10.3 혼합(blend)

이미지와 element를 혼합해서 새로운 이미지를 만들어 내는 기법

• 원본을 유지한 채 코드를 통해서 효과를 주기 때문에 각 element의 특성을 유지하거나 동적 element를 만들어 사용자와 상호작용 하기에도 용이하다.
• 예를 들어 텍스트를 '텍스트 자체'로 유지가 가능하기 때문에 복사, 검색 등이 가능

Background-blend-mode

---

 

배경(background) 끼리 blend

 

.blend {
    /* blend 할 색상 */
    /* 색상 표현: rgba (RED, BLUE, GREEN, 투명도) */
    background-color: rbga(255, 0, 0, 0.5);

    /* blend 할 이미지 */
    background-img: url('sample.jpg');

    /* blend 설정: 색상과 이미지를 color mode로 blend */
    background-blend-mode: color;
}

 

:hover를 이용해서 element 위에 마우스가 올라갔을 때 blend 효과가 나타나도록 할 수도 있다.

 

.blend:hover {
    /* blend 색상의 투명도를 1로 높여서 결과를 다르게 함 */
    background-color: rgba(255, 0, 0, 1);

    /* 마우스가 올라갔을 때 전환을 부드럽게 해주는 효과 - 추후 강의 */
    transition: background-color 5s;
}

 

Mix-blend-mode

---

 

Content 사이에 blend를 적용할 수도 있다.

 

<div class="blend">
    <h1> title </h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae.
</div>

 

body {
    /* blend할 배경 이미지 */
    background-image: url('image.jpg');
}

.blend {
    font-size: 2rem;
    color: red;

    /* body의 배경 이미지와 class가 blend인 element (text)를 screen모드로 blend */
    mix-blend-mode: screen;
}

참고

---

• 생활코딩 CSS - 혼합(blend)
  
  
• background-blend-mode by MDN web docs
• mix-blend-mode by MDN web docs