CSS에서 PNG 파일의 배경색을 제거하십시오.

Question

CSS를 사용하여 png의 배경색을 제거하는 방법은 무엇입니까?

배경 이미지 위에 png 아이콘을 쌓아야하는 웹 사이트에서 작업하고 있습니다. 이미지는 외부 API에서 가져온 것이므로 미리 편집 할 수 없습니다.

Answer 1

옵션 1 : 순수 CSS는 [제한된 지원]

이 작업을 수행 할 수있는 유일한 방법은 당신이 만약 mix-blend-mode 또는 background-blend-mode하지만 불행히도 가 IE에서 지원되지 않습니다 및 Edge (지원 수준 here을 확인)를 사용하는 것입니다 필요한 IE 지원은 옵션 2를 참조하십시오.

이 CSS 속성 here에 대한 자세한 내용을 볼 수 있습니다. 블렌드 모드를 screen으로 지정하면 png 이미지의 흰색 배경을 제거 할 수 있습니다.

background-image: url(face.jpg); 
    background-color: red; 
    background-blend-mode: multiply; 

옵션 2 : ImageMagick이 [백엔드 필요]

당신은 API에서 이미지를 가져 자신의 백엔드 엔드 포인트를 만들 수 있습니다, ImageMagick이를 사용하여 배경을 제거하고 새로운 투명 이미지를 반환. 아이콘이 작 으면 이미지를 API로 encode base64로 포함시킬 수도 있습니다. Base65 인코딩 및 디코딩에는 브라우저 지원 full이 있습니다.

Answer 2

혼합 모드

그래서 당신이 IE/에지에 대해 걱정할 필요가없는 경우 이들에 대한 브라우저 지원이 매우 낮 동안 모바일/브라우저이 잘되어야합니다.

, 당신이 할 싶어하는 것은 적용하여 배경 이미지 아무도 줄 것 동안 지정한 배경 - 혼합 모드

다음에 배경 색이다 사용하기 매우 간단 이미지 편집 소프트웨어에서 완벽하게 배경을 변경하면 을 곱하여을 곱하면됩니다.

예는 :

background-image: url('yourimage.png'); 
background-color: blue; 
background-blend-mode: multiply;