CSS 색상과 이미지 섞기 - 혼합(blend)

CSS가 발전함에 따라 이제 포토샵으로 해야만 했던 작업들이 코딩으로 가능해지고 있습니다.

이번 포스팅은 그 중 이미지 혼합 기능인 blend-mode 에 대한 실험입니다.

색상과 이미지를 혼합하는 기능을 어디서 쓸까 생각하다가 운영중인 쇼핑몰에서 색상과 재질을 선택해서 미리 볼 수 있는 Custom Option 기능을 만드는데 활용했습니다.

[재질과 색상의 혼합] - http://www.trymoon.kr - NO BRAND BUT GOOD SENSE

위 화면은 신발 쇼핑몰에서 혼합 모드를 응용하여 개발한 것입니다.

정의해놓은 재질을 선택하고, 색상을 선택하면 재질 이미지와 색상을 혼합하여 결과를 아래 보여주는 방식입니다.

위 화면을 개발하기전, 제가 블랜드 모드 관련 샘플로 만들어놓은 화면입니다.

위 샘플은 대부분의 이미지와 색상에서 문제 없이 잘 동작하였지만, 모든 것엔 예외가 있듯 이 기능에도 예외사항이 있습니다.

블랙이랑 화이트는 위 일반적인 방법으로 혼합하면 이미지가 거의 안보이고 원색상만 보이는 현상이 있습니다,

위 샘플은 이런 예외 경우를 포괄하여 만든 샘플이니 도움되시길 바래요~

위 샘플은 Github에 올렸으니 필요하시면 다운로드 가능합니다.

https://github.com/kkotkkio/css-blend-image-color

혼합모드 사용 방법은 간단합니다.

CSS 몇줄이면 끝입니다.

아래처럼 이미지와 색상을 지정하고, blend-mode를 color-burn으로 설정하시면 이미지와 색상이 혼합됩니다.

background-image: url(image.jpg);
background-color: #8f1313;
background-blend-mode: color-burn;

하지만 전에 언급했던 대로, 완전한 검정색과 완전한 흰색에서는 CSS를 위처럼 작성하면 그냥 색상만 나옵니다.

이 경우엔 검정과 흰색의 대처 방법이 조금 다른데요, 먼저 검은색은 #333 처럼 #000에 가까운 검정계열의 색상코드를 설정하시면 됩니다. 실험 결과 섞이면서 좀 더 어두워지기 때문에 거의 검정이나 다름없어 보였습ㄴ다.

.black {
  background-color: #333;
}

그리고 흰색의 경우엔 blend-mode를 luminosity로 설정 하시면 됩니다.

background-blend-mode: luminosity;

이 혼합모드를 안쓰고 color-burn을 써도 혼합은 되긴 하지만, 거의 혼합된 느낌이 안들더라구요.

luminosity를 쓰시면 훨씬 잘 혼합된 느낌으로 나옵니다.

하지만 그래도 이미지에 따라 (특히 이미지도 흰색계열일때)  뭔가 어색하고 제대로 혼합된 느낌이 안날 수 있습니다.

그럴땐 밝기 필터를 조정하여 해결할 수 있습니다.

아래 문법대로 상황에 맞게 조절하셔서 사용하시면 되겠습니다.

-webkit-filter: brightness(1.10);