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.