Como remover o fundo de uma imagem com CSS

Imagens com fundo transparente no CSS

• Sabia que é possível remover o fundo de uma imagem via código CSS?
• Basta adicionar a propriedade “mix-blend-mode” como “multiply”
• Veja o exemplo abaixo:

HTML

<img src="/assets/logo.png" class="logo" />

CSS

.logo {
  mix-blend-mode: multiply;
}

React

• Essa solução é viável para quem precisa ter um controle da imagem tanto em temas claros, quanto em temas escuros (dark/light mode).
• Nesse exemplo abaixo a ideia era que a imagem permanecesse com suas cores originais no modo claro e que no modo escuro fosse aplicado a transparência nas partes brancas da imagem e que todo seu conteúdo fosse alterado para a cor branca.
• Veja abaixo o exemplo:

<Box
  sx={
    mixBlendMode: themeName === "dark" ? "plus-lighter" : "multiply",
  }
>
  <img
    src={img}
    width={props.width}
    height={props.height}
    style={
      filter:
        themeName === "dark"
          ? "grayscale(1) contrast(1) invert(1) brightness(130%)"
          : "none",
    }
  />
</Box>

Observações:

• O componente React está envolvido uma Box do MUI, mas poderia ser uma div com style.
• Quanto maior o brilho brightness mais a imagem fica branca;
• Quanto maior o contraste contrast mais pixelada a imagem fica;
• A chamada ao themeName === "dark" é um context global do React;

Conclusão

• E isso resolveu o problema! 👊
• A imagem fica com suas cores originais no modo claro, porém no modo escuro é aplicada a transparência e a cor é alterada ajustada para branco em toda foto.