뒤늦게 알아서 뼈아픈 유용한 CSS : background-blend-mode

background-blend-mode

background-blend-mode는 포토샵에 있는 레이어 블랜드 모드를 html에서도 구현할 수 있도록 도와준다.

백그라운드 img url을 두개를 적으면 앞 이미지가 뒷 이미지에 블랜드된다. (자식 div 백그라운드를 부모 백그라운드에 블랜드하는 식은 안 된다. : 혹시 되는 형태를 발견하면 수정할 것)

div {
    background: url(../images/blend.png) center 40% no-repeat, url(../images/bg.png) center no-repeat;
    background-size: 276px 46px, cover;
    background-blend-mode: hard-light;
}

위 코드는 내가 실사용했던 코드를 수정한 것이다.

추가적으로 담을 내용은 백그라운드 두개를 한 클래스 안에 지정이 가능하고, 백그라운드 사이즈도 한개는 커버 한개는 직접 지정할 수 있었다는 것... 으악! 왜 몰랐을까..

---

호환성 : IE 빼고 전부 가능