[CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법

[CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법

 

 

 

아이콘과 같이 이미지를 생성받았는데, 투명한 배경에 해당 이미지 색상만 변경하고 싶다고해서

 

매번 이미지를 색상별로 요청할 수 없을 때

 

 

CSS로 이미지 색상 변경하는 방법이다.

 

 

참고로 정식 방법은 아니여서 정확한 색상표현이 되진 않는다.

 

 

 

 

위의 스프라이트 아이콘 이미지로 살펴보자.

 

 

 

 

img {
	filter: opacity(0.5) drop-shadow(0 0 0 red);
}

 

 

 

red 자리에 원하는 색상을 넣으면 된다.

 

 

기존에 만들어진 이미지 색상의 투명도를 주고, 색상을 얹는 잔머리를 사용한 방식이라 정확한 색상이 표현되지 않고 혼합된 색상으로 표현되니, 

 

협업이 힘들거나 커스텀이 필요한 경우에만 사용하기에 좋을 것 같다.

 

 

 

- red

 

 

 

- yellow